CSS清除浮动4种方法及详细解析

问题所在：子盒子浮动导致父盒子的内高度为0，父级盒子不能被撑开，发生高度坍塌的情况。如下图所示：

答案：

1. 给父级元素设置合适的高度，手动撑开

2. 给父元素添加样式 overflow:hidden/auto （这个属性相当于触发BFC，让父级紧贴内容，包括使用了浮动的盒子）

3. 在浮动元素结尾增加空的div盒子，添加样式 clear:both

4. 给父元素添加伪类 :after 和 zoom （最推荐）

 

详细解析：

1. 给父级元素设置合适的高度，手动撑开

只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

 

2. 给父元素添加样式 overflow:hidden/auto （这个属性相当于触发BFC，让父级紧贴内容，包括使用了浮动的盒子）

在浮动元素的父元素上设置了 overflow 的值为 hidden 或 auto （超过的部分不显示），可以闭合浮动。

overflow的属性：

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

 

3. 在浮动元素结尾增加空的div盒子，添加样式 clear:both

clear 有 几个属性值，分别为

• both         在元素左右两侧不允许出现浮动元素
• left           在元素左侧不允许出现浮动元素
• right         在元素右侧不允许出现浮动元素
• none        不清除浮动
• inherit      继承父元素的值

 

4. 给父元素添加伪类 :after 和 zoom （最推荐）

这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁。

//在类名为clearfix的元素后面加入内容

.clearfix:after{
  display: block;
  clear: both;
  content: "";
  height: 0;
  line-height: 0;
  visibility: hidden;
}

.clearfix{
  zoom: 1;  //因为IE6不支持:after伪类
}

 

拓展：

为什么会出现浮动？

由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素

2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后

3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。