css之清除浮动

此文章和上篇文章css左右布局有相同之处,只是文章侧重点不同。
在两栏布局中,如果有页脚的话,如果不清除浮动,会导致页面主体部分搞定塌陷,这就需要清除浮动!

看下面的HTML代码,结构一目了然,container包含menu和main,最底部是footer,为了使menu和main位于一行,需要同时左浮动(float: left;),此时会出现高度塌陷,如图。

未清除浮动的时候高度塌陷

可以看到截图最上部有一条宽度为2px的线,其实它是container容器的边框,也就是本应该包含left和main的container高度为0,这就是所谓的高度塌陷。

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
<!-- 用于区分各个div之间的关系 -->
.container,
.menu,
.main,
.footer {
border: 1px solid #000;
}
.menu {
background-color: green;
}
.main {
background-color: red;
}
.footer {
margin-top: 10px;
}
<!--
menumain同时浮动,居于同一排
-->
.menu,
.main {
float: left;
margin: 10px;
width: 48%;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
我是菜单部分
</div>
<div class="main">
我是主体内容
</div>
</div>
<div class="footer">
我是页脚
</div>
</body>
</html>

下面我们来清除浮动,css代码如下,在container的div上再加上clearfix这个class就可以了。

1
2
3
4
5
6
7
8
9
10
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
}
.clearfix {
*zoom: 1;
}

清除浮动后则正常,如图。

参考文章:

  1. http://www.daqianduan.com/3606.html
  2. http://www.iyunlu.com/view/css-xhtml/55.html
我知道是不会有人点的,但万一有人想不开呢!