html清除浮动用意,css清除浮动是什么意思？

在CSS中，清除浮动指的是清除掉元素float属性。那么如何清除浮动？下面本篇文章就来给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

清除浮动介绍

假设了有三个盒子对象，一个父级里包含了两个子级，子级一个使用了float:left属性，另外一个子级使用float:right属性。同时设置div css border，父级css边框颜色为红色，两个子级边框颜色为蓝色；父级CSS背景样式为黄色，两个子级背景为白色；父级css width宽度为400px，两个子级css宽度均为180px，两个子级再设置相同高度100px，父级css height高度暂不设置(通常为实际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的: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