CSS中清除浮动的方式

上一篇文章讲了页面布局的解决方案,其中有一个方案是使用浮动(float)。使用浮动的优点就是兼容性好,使用也比较方便。但是有一个缺点就是会脱离标准流,如果处理的不好,会对后面的元素布局产生影响。所以就需要使用清除浮动来消除这些影响。清除浮动的方式有很多,那么哪一种是最好的呢?看完这篇文章你就会明白了。

浮动产生的主要问题

使用浮动后会产生的主要问题是高度塌陷。那么什么是高度坍塌?

在标准流中,没有设置高度的父元素,它的高度默认是被子元素撑开的,也就是子元素的高度。但是当子元素设置浮动后,子元素会完全脱离标准流,父元素内没有了子元素,并且也没有设置高度,导致父元素的高度坍塌。坍塌后,就会影响后面元素的布局,从而造成一定的影响。如下图所示:

  • 子元素未浮动时

蓝色的父元素div包裹着两个子元素div,未设置高度的父元素被子元素撑开。红色的div和蓝色的div是兄弟元素。

清除浮动

  • 子元素浮动后

清除浮动

浮动后就会造成父元素的高度坍塌,从而导致页面布局的混乱。

所以为了使用浮动后而不影响页面整体的布局,就需要清除使用浮动产生的问题。

清除浮动的几种方法

方法一:给父元素添加伪元素:after

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
/* 为了方便观看这样写样式 */
.content {width: 110px;background: skyblue;}

.one {float: left;width: 50px;height: 50px;background: gray;}

.two {float: right;width: 50px;height: 50px;background: yellow;}

.next {width: 110px;height: 100px;background: red;}

/* 伪元素:after 清除浮动 */
.clearfix:after{
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix{
zoom: 1;
}
</style>
<body>
<div class="content clearfix">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="next"></div>
</body>

FVH3nS.png

清除浮动后就会正常显示
  • 原理:与方法二比较相似,添加一个隐藏的块级元素,用css提供的clear:both清除浮动。
  • 优点:兼容性好。:after在IE8及以上的版本和其他主流浏览器中都支持,zoomIE专属,支持IE6,IE7。
  • 缺点:代码多,初次使用不能理解原理。
  • 建议:推荐使用,建议定义公共样式。

方法二:加一个空的div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.content {width: 110px; background: skyblue;}

.one {float: left;width: 50px;height: 50px; background: gray;}

.two {float: right;width: 50px;height: 50px; background: yellow;}

.next {width: 110px;height: 100px; background: red;}

/* 给新添加的div设置样式 */
.clearfix {
clear: both;
}
</style>
<body>
<div class="content">
<div class="one"></div>
<div class="two"></div>
<div class="clearfix"></div>
</div>
<div class="next"></div>
</body>
  • 原理:添加一个空的div,用css提供的clear:both清除样式。
  • 优点:简单,代码少,浏览器支持好
  • 缺点:给页面添加空的div,一旦页面布局复杂起来或使用的浮动过多,使用起来页面看上去就会很乱。

方法三:父元素定义overflow:hidden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
.content {
width: 110px;
background: skyblue;
/* 给父元素增加 */
overflow: hidden;
}

.one {float: left;width: 50px;height: 50px;background: gray;}

.two {float: right;width: 50px;height: 50px;background: yellow;}

.next {width: 110px;height: 100px;background: red;}
</style>
<body>
<div class="content">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="next"></div>
</body>
  • 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
  • 优点:简单,代码少,浏览器支持好
  • 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏

方法四:父元素增加height

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
.content {
width: 110px;
background: skyblue;
/* 给父元素添加height属性 */
height:50px;
}

.one {float: left;width: 50px;height: 50px;background: gray;}

.two {float: right;width: 50px;height: 50px;background: yellow;}

.next {width: 110px;height: 100px;background: red;}
</style>
<body>
<div class="content">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="next"></div>
</body>

除了上述这四种常用的之外,还有一些方法。如

  • 父元素定义overflow:auto
  • 父元素也一起浮动
  • 父元素定义display:table
  • 结尾处加br标签clear:both

这几种方法使用起来虽然解决了浮动的问题,但是会有更多的问题产生。所以只做了解,不推荐使用。

推荐使用方法一,并且这种方式使用的最多

Author: YangLeLe
Link: http://younglele.cn/how-to-clear-float-in-css/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.