清除浮动的几种方法

父级不浮动，子级浮动后，父级无法包住子级而造成布局的混乱，如何清除浮动呢，以下给出几种清除浮动的方法供参考。

清除浮动的方式，总结了一下，大概有如下几类：

1. 结尾空元素或者after等伪元素或者br 来clear
2. 父元素同样浮动
3. 父元素设置overflow为hidden或者auto
4. 父元素display：table                  display：flex；也可以完成清浮动

clear属性为一类，后面三种都是通过触发BFC来实现的。

块格式化上下文（BFC）有下面几个特点：

1. BFC就像一道屏障，隔离出了BFC内部和外部，内部和外部区域的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则，不影响外部渲染，也不受外部渲染影响。
2. BFC的区域不会和外部浮动盒子的外边距区域发生叠加。也就是说，外部任何浮动元素区域和BFC区域是泾渭分明的，不可能重叠。
3. BFC在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。

HTML结构中，当构建BFC区域的元素紧接着一个浮动盒子时，即，是该浮动盒子的兄弟节点，BFC区域会首先尝试在浮动盒子的旁边渲染，但若宽度不够，就在浮动元素的下方渲染。

清除浮动的8种方法：

1、在子级的后面增加一个空的div，并且设置它的css为clear：both

原理：父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。

建议：不推荐使用，如果页面中有很多浮动布局，则要增加很多空div，在页面中增加冗余标签

2、给父级设置高度

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 

建议：不推荐使用，该方法只适合父级固定宽高的布局

3、给父级定义伪类

.clear:after{

      display: block;
      clear:both;//clear 属性只能加在块级元素上，加在内联元素上是不起作用的，所以要设置display：block
      content:'';
      visibility: hidden;
      height:0;

}

"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。

. 通过上部分的分析得到结论如下：

a) .clear:after{content:"";display:block;clear:both;} 可以清除非IE6、IE7的所有浮动。

i. after伪类IE6、IE7不支持。

b) .clear{zoom:1;} 可以激发IE6、IE7的hasLayout工作,从而可以自动修正布局，所以也就不需要我们手动清浮动了。

i. zoom属性可以放大缩小元素（取值1表示原比例大小），这个属性本身有的浏览器是不兼容的（如火狐），不兼容的浏览器也不会起到任何效果（所以无害），而IE6、IE7是兼容的，刚好用它激发IE6、IE7的hasLayout工作。

建议：推荐使用，建议定义公共类，以减少CSS代码。 

4、给父级定义overfloat:hidden;

原理：不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 ,不能和position同时使用，因为超出的尺寸会被隐藏，需要和zoom：1；配合使用

缺点：一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

如果要用” overflow”清浮动的话，需要跟zoom一起使用。两个一起使用，解决所有浏览器下的清浮动

建议：在没有position时，可以使用

5、给父级定义overflow:auto

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 

6、父级div也一起浮动

原理：所有代码一起浮动就成了一个整体。

建议：不推荐使用，这样会产生新的浮动问题

7、给父级设置display：table；

建议：不推荐使用，会出现新的未知问题

8、br元素有一个clear=“all”的属性功能跟样式中的 “clear:both;”相同，并且br元素本身没有高度，所以也就不会存在IE低版本下最小高度问题。 只需要在浮动元素下添加一句 : <br clear=”all” />

 

 两句话一起用，搞定所有浏览器下的清浮动：

.clear{zoom:1;} .clear:after{content:"";display:block;clear:both;}