CSS的浮动以及清除浮动

CSS 浮动

1. 浮动的产生：

给元素添加了float属性（float:left,float:right）。

2.浮动的作用：

可以让元素进行横向排列、做文字围绕图片效果（因为文档流元素会忽视浮动元素的存在，但是文档流元素的文本却不会。）。

3.为什么要清除浮动：

添加了float属性后，该元素会脱离正常的文档流，所以会覆盖其他的元素，父元素由于没有被撑开，造成了高度塌陷。所以清除浮动主要是解决父元素的高度塌陷问题。

3.1 给父元素添加：overflow:hidden(创建BFC)。

这里就不做BFC的讲解了。这个属性解决的依据是：计算BFC的高度时，浮动元素也参与计算，所以给父元素创建BFC。

3.2 给父元素添加height固定值（不太推荐）：

由于是高度塌陷，最直接方法就是给父元素一个高度。但是这个方法不太可取。因为在实际项目中，数据往往是动态无法预测的，所以高度大小不好给。

3.3 给父元素添加.clearfix（最常用）：

.clearfix::after{
    content:"";
    display:'block';
    clear:both;// 清除两边浮动
    height:0;
}
.clearfix{
    *zoom:1;
}