HTML+CSS清除浮动的方法

产生浮动的原因

在一张HTML里,元素的排序方式遵循文档流.即是依次排序.从上到下,从左到右依次排序.

而脱离文档流就意味着不再遵循此规则.可以通过float与positon使得元素脱离文档流,当给一个元素添加float属性时,元素就会脱离标准文档流.

浮动带来的问题

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

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

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

解决浮动，清除浮动的方法

常用的三种方法
1、通过手动设置浮动的元素的父元素的高.但是这样做有一个不好的地方,就是把元素的高度给写固定了,不利于后期的维护.所以不推荐这样写。

2、使用 clear:“both”清除浮动
我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“”结束前加此div引入“class=“clear””样式。这样即可清除浮动。

3、父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以用很少CSS代码即可解决浮动产生。