额外标签法
额外标签法也称为隔墙法，会在浮动元素末尾添加一个空的标签，原理是使用一个空盒子让浮动形成闭合浮动 ，只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
代码如下（示例）：
<style>
.box {
border: 1px solid blue;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div style="clear: both"></div>
</div>
</body>
使用overflow
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll，overflow是指溢出的部分，overflow直接使用将溢出部分删除，就可以让浮动盒子留在盒子里。
代码如下（示例）：
<style>
.box {
border: 1px solid blue;
overflow: hidden;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
添加:after伪类元素
简单说就是第一种方法的升级版，可以直接在HTML里面的盒子里放入clearfix就可以直接实现清除浮动的效果。
代码如下：
<style>
.box {
border: 1px solid blue;
overflow: hidden;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
</style>
<body>
<div class="box">
<div class="box1 clearfix"></div>
</div>
</body>
给父级添加双伪元素
在CSS的style中写下双伪元素的伪类选择器之后，在父级的父子class内写入clearfix就可以实现清除浮动的效果，这个效果在各种大型的网站中使用较多
<style>
.box {
border: 1px solid blue;
overflow: hidden;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<body>
<div class="box clearfix">
<div class="box1"></div>
</div>
</body>
总结
这里只是介绍了集中清除浮动的方法，清除浮动的本质是清除浮动元素造成的影响。如果父盒子本身有高度，则不需要清除浮动。四种清除浮动的方法中，下面三种使用更多，可以根据自己的需求使用。
网友评论