清除浮动的最常用的四种方法，以及优缺点
2019-08-28 本文已影响0人
Yin先生
为什么要清除浮动？
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
1.如下，我给父盒子设置一个boder，内部放两个盒子一个box1 一个box2，未给box1和box2设置浮动，则他们会默认撑开父盒子.
image.png
2.当我们给内部两个盒子都加上float属性的时候。
image.png
我们已经给box1和box2加上浮动属性了，因为父元素没有加高度导致底部黄色的盒子顶了上来，变成了一条线。
总结一下：
当父元素不给高度的时候，内部的子元素会自动撑开；而浮动时父元素会变成一条线。
那我们该怎么解决这个问题呢，往下看。
清除浮动的方法（最常用的4种）
1.额外标签法（在最后一个浮动标签后，新加一个空div标签，给其设置clear：both；）（不推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
border:1px solid red;
width:500px;
}
.box1 {
width:100px;
height:100px;
background:pink;
float:left;
}
.box2 {
width:50px;
height:50px;
background:blue;
float:left;
}
.footer {
width:400px;
height:50px;
background:yellow;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="clear">额外的</div>
</div>
<div class="footer"></div>
</body>
</html>
效果如下：
image.png
如果我们清除了浮动，父元素就会自动检测盒子最高的高度，然后与他同高。
优点：通俗易懂，方便。
缺点：添加无意义的标签，语义化差。
2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
通过触发BFC方式，实现清除浮动
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素(不推荐使用)
3.使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
</body>
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.(推荐使用)
4.使用before和after双伪元素清除浮动(代码简洁，推荐使用)
.clearfix::before,
.clearfix::after {
content: "";
clear: both;
display: block;
}
<div class="box clearfix">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="footer"></div>
