能详细讲解一下为什么要用clearFloat么?

源自：4-3 menu

能详细讲解一下为什么要用clearFloat么?

.clearFloat{ zoom: 1;}/*设置或检索对象的缩放比例。*/
.clearFloat:after{
display: block;
clear: both;/*清除两侧浮动*/
content: '';/*用来和 :after 及 :before 伪元素一起使用，在对象前或后显示内容。*/
visibility: hidden;/*规定元素是否可见。仍占位置*/
height: 0;

}

直接用float:left/right和clearFloat有啥区别?

提问者：mengniu 2017-07-13 13:54

个回答

花森煜米

2017-07-14 18:15:31

已采纳

IE6/7只能通过触发hasLayout属性来实现清除浮动、避免容器高度崩塌，而通过zoom:1可以触发hasLayout。
这个是IE老版本浏览器本身的问题。
```
.fix { zoom: 1; }
```
现代浏览器则可以用
```
.clearfix:after {
    content: '.';
    display: block;                                        
    height: 0;
    visibility: hidden;
    clear: both;
 }
```
What is haslayout?
https://stackoverflow.com/questions/1794350/what-is-haslayoutzoom及IE的hasLayout
zoom及IE的hasLayout
http://www.imooc.com/qadetail/226019

0
花森煜米

2017-07-14 18:16:50

zoom及IE的hasLayout。以上网址错了，以上是正确的
http://xfhnever.com/2014/07/30/css-zoom/

0
花森煜米

2017-07-13 23:09:46

元素浮动的时候float:left/right脱离文档流，如果父元素没有设置高度的话，浮动会让父元素高度塌陷，浮动的元素直接跑到父容器框外，因此需要清除浮动，让父元素包含浮动的元素。
float:left/right就是让元素产生向左或向右浮动的效果，clearFloat就是清理浮动带来的负面影响。

1