CSS面试考点之清除浮动

1、浮动产生原因

一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSSfloat浮动就产生了。

本来两个对象盒子是在黄色盒子内，因为对两个盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致黄色盒子不能撑开，这样浮动就产生了。

2、浮动产生负作用

1）背景不能显示

由于浮动的产生，如果对父级设置了背景，由于父级不能被撑开，所以导致背景不能显示。

2）边框也不能撑开

如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3）margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了padding、margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

3、清除浮动

1）对父级设置适合CSS高度

对父级设置适合高度样式清除浮动，这里对“topDiv”设置一定高度即可，一般设置高度需要能确定内容高度才能设置。需要准确的高度，不符合实际。

2）clear: both 清除浮动

为了统一样式，我们需要新建一个盒子div，样式设置为“clear: both”（both 在左右两侧均不允许浮动元素），然后在我们在父级元素结束前引入此div。这样即可清除浮动。

3）父级div定义一个伪类：after

父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。注意到该伪元素的display值为block，即，它是一个不可见的块级元素（有的地方使用table，因为table也是一个块级元素）。

3）父级div定义 overflow属性

如对父级CSS选择器加overflow:hidden样式（形成BFC块级格式化上下文），除了"visible"之外的任何有效值，它们都能达到撑起父元素高度，清除浮动的目的。优点是可以很少CSS代码即可解决浮动产生。