你还在用clear:both吗？

对于清除浮动 clear：both； 我觉得这个概念误导了很多人，我觉得有必要指出来，希望你能耐心看完 。

上面的元素 有浮动的话，下面的元素要清除浮动

但是你们有没有想过，clear：both 清除浮动，只是治标不治本的方法。

通常为了开发效率，我们还会将清除浮动定义一个专属class

.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }.clearfix {display:block;}.clear{ clear:both;}/* 清除浮动*/

供以调用

<div class="clearfix"></div>

有多少人是这样做的？

我带领大家来剖析一下，浮动元素导致它下面 元素错位的源头所在，并且从源头解决它

图片中，两个红色方块，一个向左浮动，一个向右浮动，我们可以看到，后面的 demo2 受到了影响

图中，我们给 demo2加上了 clear:both; 我们可以看到它正常了， 排在了两个红色方块的后面

真相真的是这样吗？

图中，当我们把 鼠标放在 <div class="left" > 上的时候，页面中圈出了它的大小尺寸

图中，当我们把鼠标放在 <div class="right">的时候， 也圈出了right的大小尺寸

图中，当我们把鼠标放在 <div class="demo1">上的时候 ，页面中没有圈出。。

结论

浮动的元素无法撑起父元素的高度 ，所以父元素高度为0

图中，这个就很好的解释了，demo2会在这个位置，因为 demo1没有高度！

正确的方法

图中，我们给 demo1 设置了高度自适应 ： height:auto; overflow:hidden; ，我们可以看到 ，鼠标放在demo1上，页面中圈出了它应有的尺寸大小

所以很自然

demo2不加浮动也不会错位了 。

结论

这个方法是从源头上分析和解决方案， 如果碰到特殊情况，比如父层里面有超出内容，也会被隐藏，这个时候我们还是需要用到clear：both，或者 div:after{ clear:both;}

最后

：after{ clear：both} 虽然好用，如果你考虑ie8甚至更低浏览器，不建议采用

------------------

附：web前端千人交流群 308736107

本人qq6133576