本章主要介绍三种常用的清除浮动的方法，主要包括：
[1] 增加一个空 div, 使用 clear:both 将浮动元素 "挤到" 父元素中
[2] 在父元素里增加 overflow: hidden
[3] 使用伪类 :after (推荐)
- 清除浮动，其实就是清除元素被定义浮动之后带来的脱离文档流的影响。如果我们不想浮动元素后面的文字环绕着它，而是希望后面的元素回归到正常文档流时候的布局，这个时候我们可以使用清除浮动来实现。
- 如果父元素不设置高度，并且没有使用清除浮动，浮动的子元素就无法填入到父元素中，造成父元素高度塌陷。高度的塌陷使我们页面后面的布局不能正常显示。
<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<meta charset="utf-8">
</head>
<style type="text/css">
/* 方法1: 增加一个空 div, 将浮动元素 "挤到" 父元素中 */
.div1{
width: 400px;
border: 1px solid red;
}
.div2{
border: 1px solid red;
margin: 10px 0;
width: 400px;
}
.left{
float: left;
width: 20%;
background:#DDD;
}
.right{
float: right;
width: 30%;
background:#DDD;
}
.clear { clear: both; } /* 关键代码 */
/* 方法2: 在父元素里增加 overflow: hidden */
.overflow { overflow: hidden; } /* 关键代码 */
/* 方法3: 使用伪类 :after (推荐) */
/* 解析原理：
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content: " "生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:" ",有些版本可能content 里面内容为空,firefox直到7.0 content:"" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容,这也就是其他版本的闭合浮动为什么会有font-size：0, line-height：0。
*/
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* IE6、7的兼容性问题 */
}
/* 等价于 */
.clearfloat:after { display:block; clear:both; content:""; visibility:hidden; height:0 }
.clearfloat{ zoom:1; }
</style>
<body>
<!-- 方法1 -->
<div class="div1">
<div class="left">Left1</div>
<div class="right">Right1</div>
<div class="clear"></div> <!-- 缺点: 添加一个额外的 div 标签 -->
</div>
<div class="div2">方法1: 增加一个空 div, 将浮动元素 "挤到" 父元素中</div>
<!-- 方法2 -->
<div class="div1 overflow"> <!-- 缺点：会隐藏超出父元素的部分, 有时候这并不是预期的效果 -->
<div class="left">Left2</div>
<div class="right">Right2</div>
</div>
<div class="div2">方法2: 在父元素里增加 overflow: hidden</div>
<!-- 方法3 -->
<div class="div1 clearfix"> <!-- class="div1 clearfloat" 也可以 -->
<div class="left">Left3</div>
<div class="right">Right3</div>
</div>
<div class="div2">方法3: 使用伪类 :after (推荐)</div>
</body>
</html>
清除浮动的三种方法.png
网友评论