Question

CSS浮动的清除浮动

Answer 1

在上面的叙述中，我们遇到过父类盒子没有被撑开的情况，这是由于子类盒子设置了float:left或float:right或两者都有的属性，这种情况可能会产生一些我们不希望看到的情况：
（1）、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
（2）、边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
（3）、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
由于这些负面情况的出现，我们有个时候希望能清除浮动，一般有以下两个方法：
（1）对父级设置适合高度样式清除浮动。
（2）新引入一个空的子元素，运用clear:both样式清除浮动。