浮动清除html,css中如何清除浮动？

在前端开发过程中，我们经常会使用到浮动(float)，这个我们即爱又恨的属性。爱，是因为通过浮动，我们能很方便地进行布局； 恨，是因为浮动之后遗留下来太多的问题需要解决。

浮动(float)可以控制浮动框左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。

此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”：

上图中父元素撑开的高度是padding带来的效果，父元素没有设置高度。

在父元素没有设置高度的情况下：如果父元素里的子元素没有设置浮动，那么父元素的高也会自动被撑开的，出现高度值；

如果父元素里的子元素设置了浮动，那么父元素的高就不会自动被撑开的，也就没有高度值。

显然这样设置浮动后出现了一些问题，比如：父元素的margin受到影响，无法实现上下左右居中，

若没有给父元素设置高度，浮动后父元素的高度没有被撑开，那么父元素就不会在显示屏上显示。

css中如何清除浮动？

下面介绍css清除浮动的几个方法(实现上图效果)：

1、使用带clear属性的空元素

使用空标签清除浮动：在需要清除浮动的父级元素内部的所有浮动元素后添加一个空标签(理论上可以是任何标签，但常用

和

)清除浮动，并为其定义CSS代码clear:both。

代码实例：

.demo{

width: 500px;

margin: 50px auto;

background-color: #CCCCCC;

}

.left{

width: 100px;

height: 100px;

float: left;

background-color: #21B4BB;

}

.right{

width: 100px;

height: 50px;

float: right;

background-color: #21B4BB;

}

.clear{

clear:both;

}

left

right

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

2、使用CSS的overflow属性

使用overflow清除浮动：只需在需要清除浮动的元素中定义CSS代码overflow:auto或overflow:hidden即可。

代码实例：

.demo{

width: 500px;

margin: 50px auto;

background-color: #CCCCCC;

overflow:hidden

}

.left{

width: 100px;

height: 100px;

float: left;

background-color: #21B4BB;

}

.right{

width: 100px;

height: 50px;

float: right;

background-color: #21B4BB;

}

left

right

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

3、使用CSS的:after伪元素

对父元素使用:after伪元素，设置display:table

display:table 使生成的元素以块级表格显示，占满剩余空间。

通过content: " "生成内容作为最后一个元素，至于content里面是什么都是可以的，CSS经典的是 content:"."，有些版本可能content里面内容为空。

代码实例：

.demo{

width: 500px;

margin: 50px auto;

background-color: #CCCCCC;

*zoom: 1;

}

.demo:after {

content: " ";

display: table;

clear: both;

}

.left{

width: 100px;

height: 100px;

float: left;

background-color: #21B4BB;

}

.right{

width: 100px;

height: 50px;

float: right;

background-color: #21B4BB;

}

left

right

缺点：适合现代浏览器，不支持IE6/7，*zoom: 1就是为了兼容IE6/7