为什么要清除浮动?
清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为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>
网友评论