css如何清除浮动详细讲解

1、第一：给父元素添加属性overflow: hidden;

2、第二：通过属性clear:both;达到清除浮动的目的；(元素浮动后，只需要在浮动元素后添加多一个块级元素，并添加clear: both;属性，便可以达到清除浮动的目的。如果添加的元素是在UL盒子外的，同样可以达到清除浮动效果，但是ul盒子高度不能撑开)

3、第三：通过给父级元素添加伪类after，达到清除浮动的目的；(　这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁，也是常用的清理浮动的方式。)

4、第四：使用双伪类；(原理跟给父级元素添加伪类after一样，代码更简洁)

5、第五：父盒子给高度，可以正常显示。（缺点：一般都是元素内容撑开高度，拓展性不好）

6、第六：父级元素 display:inline-block;可以正常显示（缺点：父级盒子margin:auto;失效，会发现上部分和下面黄色中间有间隙）