html和CSS基础学习（十）_css与htmlshiyoong-优快云博客

本文链接：https://blog.youkuaiyun.com/MsStrbig/article/details/78073337

本文介绍了HTML和CSS中的高度塌陷问题，当子元素浮动时会导致父元素高度塌陷。通过理解Block Formatting Context (BFC)的概念，可以找到解决办法。BFC特性包括防止垂直外边距重叠、包含浮动元素等。文章提到了开启BFC的四种方式，并指出通常使用`overflow: auto`，但不支持IE6，对于IE6可以使用`zoom: 1`来兼容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

高度塌陷问题

在文档流中父元素高度被子元素撑开的，如果子元素浮动就会造成父元素的高度塌陷。

正常状态：

塌陷状态：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*在文档流中父元素高度被子元素撑开的*/
			.box1{
				border: 10px red solid;
			}
			.box2{
				height:100px ;
				width: 100px;
				background-color: greenyellow;
				/*float: left;如果子元素浮动就会造成父元素的高度塌陷*/
				float: left;
			}
			.box3{
				height:200px ;
				background-color: gold;
				/*子元素的浮动造成父元素后面元素顶上来*/
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>

解决高度塌陷

BFC=Block Formatting context 每个元素所隐含的属性

开始父元素BFC：

1:父元素的垂直外边距不会被子元素重叠

2：开启BFC元素不会被浮动元素覆盖

3：开启BFC的元素可以包含浮动元素

如何开启BFC：

A. 设置元素浮动

B. 设置元素的绝对定位

C. 设置元素inline-block

D. 将元素OVERFLOW设置为非visible

前面三种有很大的副作用（会造成宽度丢失，不推荐使用）