【css学习笔记】深入理解之float

大四正在找工作的前端小白一枚，写文章的目的是让自己记忆更加深刻，有不严谨、错误的地方欢迎指正，一定虚心学习请教，谢谢。

（一）关于float属性的几个特性如下：

1、float属性最开始出现的目的是为了处理图文环绕的效果，因此它具有环绕性。

2、使用float的元素会自动加上一个块级框，可以像块元素一样设置宽高。

3、设置了float属性的元素会导致其父元素的坍塌，因此它具有破坏性。

（二）关于清除浮动的几个方式：

1、利用clear属性清除浮动。利用clear属性清除浮动的方式又分为两类，（1）在文档结构中添加空标签；（2）利用after伪类清除浮动。其中以使用伪类清除浮动更为常见，具体代码如下：

.clearfix:before,

.clearfix:after

{

  display: table;

  content: " ";

}

.clearfix:after

{

  clear: both;

}

.clearfix{zoom:1;} //兼容IE6、7

（三）关于clear清除浮动带来的后遗症

html结构：



css样式：



效果：



这是一个很常见的效果，左边的盒子设置了浮动，右边大盒子外层只设置了颜色，右边大盒子内部的标题设置了左浮动，但是右边大盒子内部的标题并没有设置高度，从效果图可以看到右边大盒子的高度和左边盒子一样高。

这个问题出现的原因在于clear的特性，W3C官方文档对于利用clear清除浮动的原理的解释大概是：我们之所以能够使用clear解决float引起的父元素塌陷问题，其实就是因为加了clear的空标签（或者是伪类），把空标签的top值设置在了浮动元素的bottom边缘下方，从而能够撑起父元素。示意图如下：



（四）解决clear带来的后遗症

1、使用position，避开浮动的问题；

2、为右边大盒子设置overflow：hidden或者auto，从而隔离clear的作用范围，构成BFC（BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素）。