清除浮动

Posted on Edited on

为什么要清除浮动

浮动是魔鬼，会脱离文档流，从而破坏原有的文档结构，最典型的例子就是造成父元素的高度塌陷。

清除浮动的方法

清除浮动有多种方法，这里讲三种方法，个人推荐第三种。

添加新元素、定义 clear:both

1
2
3
4
5
6
<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>
1
2
3
4
5
6
.clear{
	clear:both; 
	height: 0; 
	line-height: 0; 
	font-size: 0;
}

父元素定义 overflow:auto

1
2
3
4
5
<div class="outer clearfix">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>
1
2
3
4
.clearfix {
    overflow: auto;  // hidden 也可以 
    zoom: 1; // 兼容IE
}

使用 :after 伪元素

1
2
3
4
5
6
7
8
9
10
11
.clearfix:after {
    clear: both;
    content: '.';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
}
.clearfix {
    zoom: 1;
}

其中 clear:both; 指清除所有浮动；content:’.’;display:block; 对于FF/chrome/opera/IE8不能缺少，其中 content() 可以取值也可以为空。visibility:hidden; 的作用是允许浏览器渲染它，但不显示出来。