CSS 浮动(Float) 清除浮动

说浮动之前，先说一些别的东西

标准文档流

宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画

标准文档流的特性

1.空白折叠现象(无论多少个空格、换行、tab，都会折叠为一个空格)
2.高矮不齐，底边对齐
3.自动换行，一行写不满，换行写

行内元素和块级元素

行内元素和块级元素的区别：(非常重要)

行内元素

• 与其他行内元素并排；
• 不能设置宽、高。默认的宽度，就是文字的宽度
  块级元素
• 霸占一行，不能与其他任何元素并列

• 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%

  块级元素和行内元素的相互转换

  我们可以通过display属性将块级元素和行内元素进行相互转换

display:inline;可以把块级元素转换为行内元素
display:block;可以把行内元素转换为块级元素
再说一个：display:inline-block;可以把行内元素或块级元素设置为 行内块元素 ，可以并排显示，并且可以设置块级元素的属性

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：脱离 标准文档流！

css中一共有三种手段，使一个元素脱离标准文档流：

浮动

绝对定位
固定定位
浮动(float)
float:left | right | none ;(默认不浮动none)

浮动的元素脱标

在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排
浮动并没有完全地脱离了标准文档流（但是它具有破坏性，所以可以用Flex布局，想了解Flex布局，请参考我的 Flex布局教程），如果后面的元素内部有文字，这些文字会环绕在浮动元素的周围，产生字围效果

上图，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个div标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个div还在自己的层面上遵从标准流进行排列。

一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个行内元素，还是块级元素

浮动的元素互相贴靠
如果给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果，如下图

上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号。如果没有足够的空间靠着1号，3号自己去贴左墙，不过3号贴左墙的时候，并不会往1号里面挤，而是往1号下面排列，如果小到极限时，里面的浮动的子元素宽度是不会改变的

同样，float还有一个属性值是right，这个和属性值left是对称的。

浮动的元素有“字围”效果

如下：

上图中，我们发现：div挡住了p，但不会挡住p中的文字，形成“字围”效果。

收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）
如图：

上图中，div本身是块级元素，如果不设置widh，它会单独霸占整行；但是，设置div浮动后，它会收缩

如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷

同步

如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起(自己动手写一下)

如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界

补充：

上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：

补充

浮动只对父元素和以后的元素有影响，对之前的元素没有影响
浮动的清除(重点)
元素浮动会造成的影响：

对父元素的影响(父元素的高度坍塌)
解决办法：

加高法 给父元素设置高度，就不会塌陷(简单，基本不用，大部分情况下父元素的高度是需要子元素撑起来的)
overflow:hidden 简单，使用overflow:hidden父元素的高度会随着子元素的高度变化而变化。overflow:hidden本职工作是用来处理溢出 在使用过程中，需要注意子元素如果想要超出父元素高度，此时overflow:hidden就不适合了
隔墙法(clear:both) 在所有子元素后面加一个空的div 在这个div上面加clear:both，就可以清除浮动（分为内墙法和外墙法，本质上一样），clear:both是专业清除浮动的
对后面兄弟元素造成的影响(兄弟元素会向上移动)
解决办法：

在受影响的元素上面的加 clear:both（参考对父元素的影响）
项目中最常用的清除浮动的办法
利用伪元素 after
其实很简单,就是写一个清除浮动的类,哪个元素想要清除浮动,只需加上 class=“clearfix” 就可以,非常简单
清除浮动类的代码:

.clearfix:after{
    content: "";
    display: block;
    clear: both;
    height: 0;
}

由于浮动具有破坏性,所以后面就有一个新的Flex布局方案,用起来别提多爽了,绝对让你爽到爆,还简单容易上手,想了解 Flex布局 ,请参考我的文章：Flex 布局教程