HTML中清除浮动的⼏种⽅法清除float的常见⼏种⽅式：
清除浮动⽅法（1）在浮动元素后⾯使⽤⼀个空的⾃⾝清除浮动的元素。
例如
<div ></div>
实例：清除容器中⼦元素的浮动，让⽗元素塌陷的⾼度恢复。
<div class="content">
<div class="div1 son"></div>
<div class="div2 son"></div>
</div>
<div class="div-test"></div>
CSS代码：
.
content{
width:100px;
border:1px dotted red;
}
.div-test{
width:100px;
height:100px;
border:1px dotted black;
}
.son{
margin:5px;
width:40px;
height:40px;
background:blue;
float:left;
html里的float是什么意思}
在类为son的div左浮动的情况下，容器div⾼度塌陷。
在浮动元素后⾯使⽤⼀个空的⾃⾝清除浮动的元素。
<div class="content">
<div class="div1 son"></div>
<div class="div2 son"></div>
<!--清除浮动样式-->
<div ></div>
</div>
<div class="div-test"></div>
清除浮动样式后的效果：
清除浮动后的效果
清除浮动⽅法（2）给浮动元素的容器添加overflow:hidden；的属性和赋值。
在⽰例中需要给类为content的div元素添加overflow:hidden；其中设置zoom:1；为兼容IE6/7，触发hasLayout属性。
.content{
width:100px;
border:1px dotted red;
/*增加清除浮动的代码*/
overflow:hidden;
zoom:1;
}
.div-test{
width:100px;
height:100px;
border:1px dotted black;
}
.son{
margin:5px;
width:40px;
height:40px;
background:blue;
float:left;
}
清除浮动⽅法（3）通过CSS3的：after伪元素。
通过：after伪元素设置样式来实现浮动清除，是时下最为流⾏的清除浮动⽅式。它实现的原理与⽅法（1）⼀样，效果也可以⼀样。但是借助:after微元素设置样式，不需要在HTML代码上额外增加元素。
CSS代码：
.content{
width:100px;
border:1px dotted red;
}
.div-test{
width:100px;
height:100px;
border:1px dotted black;
}
.son{
margin:5px;
width:40px;
height:40px;
background:blue;
float:left;
}
/*此处设置清除浮动代码*/
.content:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.content{zoom:1;}
这⾥设置zoom:1；同样是为兼容IE6/7，触发hasLayout属性。
清除浮动⽅法（4）设置容器元素⾼度height，只适合⾼度固定的布局。
清除浮动⽅法（5）容器元素也设置浮动。不推荐，会产⽣新的浮动问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。