重学前端-清除浮动

清除浮动

前景提要：
1.浮动:float会使得元素脱离文档的标准流，元素不会占用原来的位置，“浮动于文档的表面”，通常根据父元素定位
2.因为子元素的浮动，从而造成父元素的高度为0，以下有几个方法，具体情况使用最恰当的方法
浮动使得高度为0

清除浮动后效果

1.直接给父元素设置高度

直接了当，根据子元素的高度，对父元素的高度进行调整后设置定值即可解决，但会有缺陷，如果当子元素的高度随内容的增加时，会使得子元素“溢出”，覆盖掉其他元素的内容。

2.附加标签点击在线coding

在最后一个浮动元素后，添加一个空标签，添加样式属性clear:both，如下

<div style="clear:both;"><div>

这种方法不建议使用，因为添加了很多无语义的标签

3.给父元素设置overflow:hidden/auto/scroll即可点击在线coding

一般使用overflow:hidden。
不推荐使用scroll值，在设置了scroll会出现小bug（例如出现了滚动条）

具体原理是因为设置了overflow值后，触发了BFC（Block Formatting Content块级格式化上下文），达到了清除浮动的效果(具体点击跳转查看)

4.设置伪元素点击在线coding

/* 在css里引用以下代码段后，只要给父元素添加上类名“clearfix”，即可清除浮动 */
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1; // IE6中不支持伪元素，*zoom时IE6中特有的清除浮动的属性，属性前添加*后，其他浏览器会不去管他，只有IE7以下识别
}

5.使用双伪元素before，after清除浮动点击在线coding

/* 使用和上述第三个一样，给父元素添加类名“clearfix”即可 */
.clearfix:before, .clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}