1.为什么要清除浮动
浮动元素会脱离文档流,导致父元素塌陷;举个例子:一个橡皮筋绑了10根筷子,此时橡皮筋就被撑开;当把筷子从橡皮筋中拿出来时,橡皮筋就变回原样。这样当话,父元素中如果有背景图片或是其他样式,就会受到影响。
2.清除浮动的方法
a.给父元素设置固定的高度
b.clear:both
在最后一个子元素的后面添加一个块级元素,然后将其设置clear:both,这样就可以清除浮动
<div id="wrap">
<div id="inner"></div>
<div style="clear: both;"></div>
</div>
#wrap{
border: 1px solid;
}
#inner{
float: left;
width: 200px;
height: 200px;
background: pink;
}
复制代码
c.伪元素清除浮动
其实和第二种方法一样,只是第二种方法会添加一个冗余元素;使用:after在浮动元素的父容器后添加一个看不见的块级元素,设置为clear:both;
<div id="wrap" class="clearfix">
<div id="inner"></div>
</div>
#wrap {
border: 1px solid;
}
#inner {
float: left;
width: 200px;
height: 200px;
background: pink;
}
/*开启haslayout*/
.clearfix {
*zoom: 1;
}
/*ie6 7 不支持伪元素*/
.clearfix:after {
content: '';
display: block;
clear: both;
height:0;
line-height:0;
visibility:hidden;//允许浏览器渲染它,但是不显示出来
}
复制代码
d.br标签清除浮动
br标签有一个clear属性,设置为all可以清除浮动
<div id="wrap">
<div id="inner"></div>
<br clear="all" />
</div>
#wrap {
border: 1px solid;
}
#inner {
float: left;
width: 200px;
height: 200px;
background: pink;
}
复制代码
参考文章:github.com/ljianshu/Bl… 浪里行舟大佬