解决高度塌陷的四种办法

# 什么是高度塌陷？

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。简单来说，就是包含含有浮动的元素的上一级的高度变为0了，下面的元素会上去，这样会导致页面布局混乱。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>高度塌陷</title>
		<style>
			.testAll {
				border: 2px solid goldenrod;
			}
			.test {
				width: 150px;
				height: 100px;
				border: 1px solid cadetblue;
			}
			.testBottom {
				width: 200px;
				height: 50px;
				background: saddlebrown;
			}
		</style>
	</head>
	<body>
		<div class="testAll">
			<div class="test"></div>
			<div class="test"></div>
			<div class="test"></div>
		</div>
		<div class="testBottom"></div>
		
	</body>
</html>

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

正常页面展示如下：如上面的代码，class=“testAll”的div的内部含有三个子div的，当子div没有设置浮动的时候，表现出来的效果是下图这样的，而且class="testBottom"这个div是显示在class="testAll"后面的，而class="testAll"的高度等于里面的三个子div（此时是按照块元素方式进行排列的）撑起来的高度。‘’

当给class=“test”的三个子div设置了float: left的时候，如下图所示，出现了页面布局混乱，而class="testAll"的这个父div的height变成了0，它里面的三个子div是浮动排列的，而class="testBottom"的这个div“跑到”它上面的元素的位置上去了，就好像它上面的元素都并不存在似的，这个就是“高度塌陷”问题了。

# 常见的解决办法：

想要下图效果：

# 方法一、最优推荐：afer+zoom

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>高度塌陷</title>
		<style>
			.testAll {
				border: 2px solid goldenrod;
			}
			.test {
				width: 150px;
				height: 100px;
				border: 1px solid cadetblue;
				float: left;
			}
			.testBottom {
				width: 200px;
				height: 50px;
				background: saddlebrown;
			}
			.testAll:after {
				content: "."; /*生成内容作为最后一个元素，至于content里面是什么没有影响*/
				display: block; /*使生成的元素以块级元素显示，占满剩余空间*/
				height: 0; /*避免生成的内容破坏原有空间的高度*/
				clear: both; /*闭合浮动*/
				visibility: hidden; /*使生成内容不可见，并允许可能生成内容盖住的内容进行点击和交互*/
			}
			.testAll {
				zoom : 1; /*触发IE6/7的haslayout*/
			}
		</style>
	</head>
	<body>
		<div class="testAll">
			<div class="test"></div>
			<div class="test"></div>
			<div class="test"></div>
		</div>
		<div class="testBottom"></div>
		
	</body>
</html>

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

利用伪类来清除浮动，其效果跟创建一个空的div并设置其为clear：both；是一样的，只不过这里用伪类代替了空的div元素，不会影响任何其他样式，通用性强，覆盖面广。

# 方法二、父元素结束之前添加一个空标签

<div class="testAll">

    <div class="test"></div>
    
    <div class="test"></div>
    
    <div class="test"></div>
    
    <div style="clear:both;"></div>
    <!--父元素结束之前添加一个标签 <div style="clear:both;"></div>-->

</div>

1
2
3
4
5
6
7
8
9
10
11
12

缺点：增加了无意义的标签

# 方法三、给父元素设置overflow:hidden; zoom:1;

缺点：要是子元素要margin负值定位或是负的绝对定位，会被裁掉，所以此方法是有不小的局限性的。其次是，若有提示信息浮窗，也会因为overflow：hidden;无法全部显示

Sweny-blog

Choose mode