一、啥是浮动元素高度塌陷
在网页设计里，咱们经常得用到 CSS 来布局。浮动元素是个挺常用的技巧，它能让元素脱离正常的文档流，跑到左边或者右边去，就像把一个东西从原来的队伍里拉出来，放到旁边一样。不过呢，浮动元素有个让人头疼的问题，就是高度塌陷。
啥叫高度塌陷呢？简单来说，当一个父元素里面的子元素都设置成浮动之后，父元素就好像“看不见”这些子元素了，它的高度会变成 0，就像瘪了气的气球一样。咱们来看个例子：
HTML 代码
<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>高度塌陷示例</title>
</head>
<body>
<!-- 父元素 -->
<div class="parent">
<!-- 子元素，设置为浮动 -->
<div class="child">子元素 1</div>
<div class="child">子元素 2</div>
</div>
</body>
</html>
CSS 代码
.parent {
border: 2px solid red; /* 给父元素加个红色边框，方便查看 */
}
.child {
float: left; /* 子元素向左浮动 */
width: 100px;
height: 100px;
background-color: blue; /* 子元素背景颜色设为蓝色 */
color: white;
text-align: center;
line-height: 100px;
}
在这个例子里，父元素 .parent 里面有两个浮动的子元素 .child。因为子元素浮动了，父元素就出现了高度塌陷，它的高度变成了 0，红色边框就挤在一起，几乎看不见了。
二、浮动元素高度塌陷带来的问题
高度塌陷可不是个小问题，它会让咱们的网页布局变得乱七八糟。比如说，咱们想让一个容器把里面的内容都包起来，结果因为高度塌陷，容器的高度没了，里面的内容就会跑到外面去，影响整个页面的美观和布局。再比如说，咱们给容器设置了背景颜色，因为高度塌陷，背景颜色也显示不出来了，就像给一个没有高度的盒子刷漆，根本看不到效果。
三、解决浮动元素高度塌陷的传统方法
方法一：给父元素设置固定高度
最简单的办法就是给父元素设置一个固定的高度。就像给一个瘪了气的气球打气，让它有一定的大小。咱们把上面的例子改一下：
.parent {
border: 2px solid red;
height: 100px; /* 给父元素设置固定高度 */
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
}
这样一来，父元素有了固定高度，红色边框就能正常显示了，里面的子元素也能正常显示在父元素里面。不过呢，这种方法有个很大的缺点，就是当子元素的高度不确定，或者需要动态变化的时候，固定高度就不好用了。比如说，子元素里面的内容可能会增加或者减少，固定高度就没办法适应这种变化了。
方法二：使用 clear: both
在浮动元素后面添加一个空的元素，然后给这个空元素设置 clear: both。这就像是在浮动元素的后面放了一堵墙，防止后面的元素乱跑。看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 2px solid red;
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
}
.clear {
clear: both; /* 清浮动 */
}
</style>
<title>clear: both 示例</title>
</head>
<body>
<div class="parent">
<div class="child">子元素 1</div>
<div class="child">子元素 2</div>
<!-- 添加一个空元素用于清浮动 -->
<div class="clear"></div>
</div>
</body>
</html>
这种方法能解决高度塌陷的问题，但是会在 HTML 里添加不必要的空元素，让代码变得臃肿。要是页面里有很多地方都需要清浮动，那代码就会变得很难看，也不好维护。
四、完美解决方案：使用 BFC（块级格式化上下文）
什么是 BFC
BFC 就是块级格式化上下文，听起来挺专业，其实就是一个独立的渲染区域，规定了里面的块级元素怎么布局，并且和外部元素相互隔离。简单来说，就是把一块东西包起来，让它和外面的东西互不干扰。
如何创建 BFC
有好几种方法可以创建 BFC，咱们常用的有以下几种：
1. 设置 float 不为 none
把父元素的 float 属性设置成 left 或者 right，就能创建 BFC。看例子：
.parent {
border: 2px solid red;
float: left; /* 创建 BFC */
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
}
2. 设置 overflow 不为 visible
把父元素的 overflow 属性设置成 hidden 或者 auto 也能创建 BFC。
.parent {
border: 2px solid red;
overflow: hidden; /* 创建 BFC */
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
}
3. 设置 display 为 inline-block、table-cell 等
把父元素的 display 属性设置成 inline-block、table-cell 等也能创建 BFC。
.parent {
border: 2px solid red;
display: inline-block; /* 创建 BFC */
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
}
BFC 解决高度塌陷的原理
当父元素创建了 BFC 之后，它就会把里面的浮动子元素包含进来，就像一个袋子把东西装进去一样。这样，父元素就能“看见”子元素了，它的高度会根据子元素的高度自动调整，高度塌陷的问题就解决了。
五、应用场景
在很多网页布局里，都可能会遇到浮动元素高度塌陷的问题。比如说，做一个新闻列表，每个新闻项可能会浮动排列，这时候就可能会出现高度塌陷的问题。再比如说，做一个商品展示页面，商品图片和信息可能会浮动排列，也会有高度塌陷的问题。使用创建 BFC 的方法，就能很好地解决这些问题，让网页布局更加稳定和美观。
六、技术优缺点分析
传统方法的优缺点
固定高度
优点：简单直接，容易实现。 缺点：不灵活，不能适应子元素高度的动态变化。
clear: both
优点：能解决高度塌陷问题。 缺点：会增加不必要的空元素，让代码变得臃肿。
BFC 方法的优缺点
优点
- 灵活：能适应子元素高度的动态变化。
- 代码简洁：不需要添加额外的空元素，让代码更加干净。
缺点
- 可能会影响布局：比如设置
float会让元素脱离正常文档流，设置overflow: hidden可能会隐藏溢出的内容。
七、注意事项
使用 BFC 时的注意事项
- 选择合适的创建 BFC 的方法：根据具体的布局需求，选择合适的方法来创建 BFC。比如，如果不想让元素脱离正常文档流，就不要用
float；如果不想隐藏溢出的内容，就不要用overflow: hidden。 - 避免过度使用：虽然 BFC 能解决高度塌陷问题，但是也不要过度使用。如果在一个页面里到处都创建 BFC，可能会让布局变得复杂，难以维护。
八、文章总结
浮动元素高度塌陷是 CSS 布局里经常会遇到的问题，传统的解决方法有一定的局限性。而使用 BFC 来解决高度塌陷问题，是一种更加灵活、简洁的方法。通过创建 BFC，父元素能把里面的浮动子元素包含进来，自动调整高度，避免高度塌陷。不过，在使用 BFC 的时候，要注意选择合适的创建方法，避免过度使用，这样才能让网页布局更加稳定、美观。
评论