一、浮动元素导致父容器高度塌陷问题的由来
在网页布局中，浮动元素是个常用的技巧。比如说，我们想让几个图片并排显示，就会用到浮动。但浮动元素有个小脾气，它会脱离正常的文档流。这就好比一群小朋友排队，突然有几个小朋友跑出去自己玩了，队伍就乱了。父容器原本是要包裹住里面的元素的，可浮动元素跑出去后，父容器就不知道该怎么算自己的高度了，于是就出现了高度塌陷的问题。
给大家举个例子，用 HTML 和 CSS 来看看这个问题是怎么发生的。
<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动元素导致的高度塌陷</title>
<style>
/* 父容器样式 */
.parent {
border: 2px solid red;
/* 这里没有设置高度，期望它能包裹子元素 */
}
/* 浮动元素样式 */
.float-element {
float: left;
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent">
<!-- 浮动元素 -->
<div class="float-element"></div>
<div class="float-element"></div>
<div class="float-element"></div>
</div>
</body>
</html>
在这个例子里，父容器 .parent 没有设置高度，它本应该根据里面的浮动元素来确定自己的高度。但由于浮动元素脱离了文档流，父容器就好像看不到它们一样，高度变成了 0，这就是高度塌陷。
二、经典布局方案之清除浮动
清除浮动是解决高度塌陷问题的一种常用方法。简单来说，就是在浮动元素的后面加一个元素，让这个元素告诉父容器：“嘿，浮动元素到我这里就结束啦，你可以正常算高度啦。”
我们可以用 clear 属性来实现清除浮动。clear 属性有几个值，left 表示清除左浮动，right 表示清除右浮动，both 表示清除左右浮动。
下面是一个示例：
<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动解决高度塌陷</title>
<style>
/* 父容器样式 */
.parent {
border: 2px solid red;
}
/* 浮动元素样式 */
.float-element {
float: left;
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
}
/* 清除浮动的元素 */
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="float-element"></div>
<div class="float-element"></div>
<div class="float-element"></div>
<!-- 清除浮动的元素 -->
<div class="clearfix"></div>
</div>
</body>
</html>
在这个例子中，我们在浮动元素的后面加了一个 <div class="clearfix">，并给它设置了 clear: both。这样，父容器就能正常计算高度了，高度塌陷的问题就解决了。
三、经典布局方案之 BFC（块级格式化上下文）
BFC 听起来挺高大上的，其实就是一个独立的渲染区域，里面的元素不会影响到外面的元素。当我们让父容器形成 BFC 时，它就能正确包裹住浮动元素，从而解决高度塌陷问题。
有几种方法可以让元素形成 BFC，比如设置 float 为 left 或 right，设置 overflow 为 hidden、auto 或 scroll 等。
下面是用 overflow: hidden 来形成 BFC 的示例：
<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用 BFC 解决高度塌陷</title>
<style>
/* 父容器样式，设置 overflow: hidden 形成 BFC */
.parent {
border: 2px solid red;
overflow: hidden;
}
/* 浮动元素样式 */
.float-element {
float: left;
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="float-element"></div>
<div class="float-element"></div>
<div class="float-element"></div>
</div>
</body>
</html>
在这个例子中，我们给父容器 .parent 设置了 overflow: hidden，这样父容器就形成了 BFC，它就能正确包裹住里面的浮动元素，高度塌陷问题也就解决了。
四、经典布局方案之伪元素清除浮动
伪元素清除浮动是一种比较优雅的方法，它不需要在 HTML 里额外添加元素，只需要用 CSS 就能解决问题。
我们可以利用 ::after 伪元素，在父容器的末尾添加一个内容为空的元素，并设置它的 clear 属性为 both。
下面是示例代码：
<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素清除浮动解决高度塌陷</title>
<style>
/* 父容器样式 */
.parent {
border: 2px solid red;
}
/* 浮动元素样式 */
.float-element {
float: left;
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
}
/* 伪元素清除浮动 */
.parent::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="float-element"></div>
<div class="float-element"></div>
<div class="float-element"></div>
</div>
</body>
</html>
在这个例子中，我们用 ::after 伪元素在父容器 .parent 的末尾添加了一个内容为空的元素，并设置它的 clear 属性为 both。这样，父容器就能正确包裹住浮动元素，高度塌陷问题就解决了。
五、应用场景
浮动元素在网页布局中很常见，比如制作导航栏、图片列表、多列布局等。当我们使用浮动来实现这些布局时，就可能会遇到父容器高度塌陷的问题。
例如，一个电商网站的商品展示页面，我们可能会用浮动来让商品图片并排显示。如果不解决高度塌陷问题，页面布局就会混乱。
六、技术优缺点
清除浮动
- 优点：简单易懂，容易实现，兼容性好。只要在浮动元素后面添加一个清除浮动的元素就可以了。
- 缺点：会在 HTML 里额外添加元素，增加了代码的复杂度，而且如果页面结构复杂，可能会导致代码难以维护。
BFC
- 优点：不需要额外添加元素，代码简洁。只需要给父容器设置一些属性就能形成 BFC，从而解决高度塌陷问题。
- 缺点：
overflow: hidden可能会隐藏一些超出父容器的内容，float会让元素脱离正常文档流，可能会影响其他元素的布局。
伪元素清除浮动
- 优点：不需要额外添加 HTML 元素，代码更加优雅，维护起来也比较方便。
- 缺点：对于一些不支持伪元素的旧浏览器，可能无法正常工作。
七、注意事项
- 在使用清除浮动的方法时，要确保清除浮动的元素在浮动元素的后面，否则无法达到清除浮动的效果。
- 使用 BFC 时，要注意
overflow属性可能会带来的副作用，比如隐藏超出内容。 - 伪元素清除浮动在一些旧浏览器上可能需要添加浏览器前缀，以确保兼容性。
八、文章总结
浮动元素导致父容器高度塌陷是网页布局中常见的问题，不过我们有多种方法可以解决这个问题。清除浮动、利用 BFC 和伪元素清除浮动是三种经典的布局方案。每种方案都有自己的优缺点和适用场景，我们要根据具体情况选择合适的方法。在实际开发中，要注意每种方法的注意事项，确保页面布局的稳定性和兼容性。
评论