浮动的设计初衷:实现文字环绕效果。
浮动的特征:脱离标准文档流,导致父元素高度塌陷,向左或者向右浮动直到遇到其他的浮动元素。
浮动产生的原因:盒子里的子元素使用了浮动属性,脱离了文档流,导致父元素无法被撑开。
浮动造成的副作用:父级的背景无法显示,父级的边框无法被撑开,以及父级与子级之间的margin和padding遭到破坏。
清除浮动的方法:
方法一:在底部插入“clear:both”声明的元素。
原理:在底层元素添加clear属性来清除浮动,是因为clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素,即清除所有浮动。
方案1:HTML层面,在浮动元素后面使用一个空元素,如<div...></div>
缺点:裸露太多的div标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.div_first{
width: 300px;
border:2px solid red;
}
.div_second{
width: 100px;
height:100px;
background: #2A2626;
float:left;
}
.div_third{
width: 200px;
height: 200px;
background: #12ED31;
float: left;
}
.div_fourth{
clear:both;
}
</style>
</head>
<body>
<div class="div_first">
<div class="div_second"></div>
<div class="div_third"></div>
<div class="div_fourth"></div>
</div>
</body>
</html>
方案二:CSS层面,使用after伪元素,推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.div_first{
width: 300px;
border:2px solid red;
}
.div_second{
width: 100px;
height:100px;
background: #2A2626;
float:left;
}
.div_third{
width: 200px;
height: 200px;
background: #12ED31;
float: left;
}
.clearfix:after{
clear:both;
height:0;
content:"";
overflow:hidden;
display:block;
}
.clearfix{
*zoom:1;/*兼容ie6,ie7*/
}
</style>
</head>
<body>
<div class="div_first clearfix">
<div class="div_second"></div>
<div class="div_third"></div>
</div>
</body>
</html>
其中clearfix可以精简为:
.clearfix:after{
clear:both;
content:"";
display:table;
}
方法二:让父元素BFC(IE8+)或者haslayout(IE6/IE7)
BFC:块状格式化上下文,特征:BFC容器是一个隔离的容器,和其他元素互不干扰;我们可以用触发两个元素的BFC来解决垂直边距折叠问。BFC可以包含浮动,清除浮动;通常用来解决浮动父元素高度坍塌的问题。
给父元素添加以下属性来触发BFC:
- float:left/right
- position:absolute/fixed
- overflow:hidden/scroll(IE7+)
- display:inline-block/table-cell(IE8+)
- width/height/zoom:1/……
例如给父级元素设置overflow:hidden来清除浮动
.div_first{
width: 300px;
border:2px solid red;
overflow:hidden;
}
总结:通常使用after伪元素作为清除浮动主要方式。.clearfix只应用在浮动元素的父级元素上。
浮动的注意点:脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用position:absolute脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。