HTML浮动元素高度问题讲解-猿码集

1. 浮动元素简介

在 HTML 和 CSS 中，浮动（float）指一种布局方式，即使在文本流中将元素或者一个元素内的文本环绕在其周围。可以设置元素向左浮动或向右浮动，浮动后，就会脱离文本流，实现文字环绕。浮动元素在页面布局中扮演着至关重要的角色。它们可以被用来创建多种布局，如：左侧栏、右侧栏、两栏或三栏布局等。

2. 浮动元素带来的问题

2.1 浮动元素高度坍塌问题

在一个文档流中，浮动元素会脱离文档流。因为浮动元素浮动在其他元素上面，而不是被其他元素包含。浮动元素不参与父元素的高度计算，可能导致父元素高度坍塌。

具体解释：假设我们有一个 div 容器，里面有两个子元素：一个是浮动元素，另一个是在非浮动元素的内容。如下所示：

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>
 
.box1 {
  float: left;
  width: 100px;
  height: 100px;
}
 
.box2 {
  height: 200px;
}

如果我们没有对父容器的高度进行设置，父容器将无法包含浮动的子元素，导致坍塌。即使我们为父容器设置高度，也可能得不到预期的效果。如下所示：

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>
 
.box1 {
  float: left;
  width: 100px;
  height: 100px;
}
 
.box2 {
  height: 200px;
}
 
.container {
  height: 0;
  overflow: hidden;
}

我们将父容器高度设为 0，overflow 属性设置为 hidden，这是为了防止父容器塌陷。然而，这只会隐藏超出容器高度的内容，如果实际内容超过容器的高度，仍然会出现父容器高度坍塌的问题。

2.2 清除浮动的方法

为了解决问题 2.1 中提到的高度坍塌问题，我们需要使用一些技术来清除浮动。下面列举了一些常见的方法：

2.2.1 Clearfix 清除浮动

Clearfix 是一个清除浮动的技术，它是一种通过在父容器上添加 CSS 清除浮动的属性来实现的。它的实现方式如下：

<div class="clearfix">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>
 
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

实现方式是在父容器上应用 clearfix 类，同时在 clearfix 的伪元素 ::after 上设置内容和 display 属性为 block，clear 属性为 both，这将强制它们跨越父容器中的浮动元素，从而清除浮动。

2.2.2 使用overflow属性清除浮动

使用 overflow 属性来清除浮动是一种非常流行的方法，因为它不需要添加多余的元素。这个方法的想法是：在父容器上应用 overflow: hidden 或 overflow: auto 属性，它将包含浮动元素，从而防止高度坍塌。

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>
 
.box1 {
  float: left;
  width: 100px;
  height: 100px;
}
 
.box2 {
  height: 200px;
}
 
.container {
  overflow: hidden;
}

2.3 浮动元素高度问题结论

无论是使用 Clearfix 清除浮动，还是使用 overflow 属性清除浮动，都可以防止高度坍塌问题。具体的使用可以根据实际情况选择。除了这些方法外，还有一些其他的方法来清除浮动，如用::before伪元素清除、使用JS清除等，但这些通常不是必要的。

3. 浮动元素案例分析及解决方案

3.1 案例描述

假设现在你需要在网页中创建一个两栏布局，左边栏宽度为 200px，固定位置，右侧栏占据剩余宽度，它应该适应其内容，并且能够在左侧栏下方正常显示。你可以尝试以下代码：

<div class="container">
  <div class="left">左边栏</div>
  <div class="right">右边栏</div>
</div>
 
.left {
  width: 200px;
  height: 500px;
  float: left;
}
 
.right {
  height: 500px;
  overflow: hidden;
}

你会发现：左侧栏是在正确的位置，但右侧栏似乎“丢失”了。这是因为右侧栏的高度不足以包含其内容，同时可能在左侧栏下方，因此它被左侧栏覆盖了。浮动元素的高度问题导致右侧栏不能像预期那样扩展其高度。

解决方法一：使用 Clearfix 清除浮动。修改以下代码：

<div class="container">
  <div class="left">左边栏</div>
  <div class="right clearfix">右边栏</div>
</div>
 
.left {
  width: 200px;
  height: 500px;
  float: left;
}
 
.right {
  height: 500px;
}
 
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

解决方法二：使用 overflow 属性。修改以下代码：

<div class="container">
  <div class="left">左边栏</div>
  <div class="right">右边栏</div>
</div>
 
.left {
  width: 200px;
  height: 500px;
  float: left;
}
 
.right {
  height: 500px;
  overflow: hidden;
}

3.2 案例解析

在解决方案一中，我们在类“right”中使用clearfix类来清除浮动，clearfix类的具体实现如下：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

这将在“右”类的最后一个元素后面插入一个伪元素，用来清除浮动。这个伪元素的“clear”属性将被设置为“both”，意味着它将在左侧和右侧都清除浮动。

在解决方案二中，我们在“右”类上使用了 overflow 属性来清除浮动。它的工作原理是将元素包装在一个具有“overflow: hidden”或“overflow: auto”的块容器中，实现了清除浮动的目的。因为包装元素具有跨越浮动元素的高度，所以它可以正确地容纳其子元素。

4. 总结

浮动是 CSS 布局中的核心概念之一。这种布局方式使得我们可以实现许多常见的网页布局类型，如两栏、三栏布局等。同时，浮动也具有一些问题。其中最常见的问题是高度坍塌，这可以通过在父容器上应用 clearfix 类或 overflow 属性来解决。由于不同方案在不同情况下都有优缺点，因此在实际使用中，选择正确的方案非常重要。

HTML浮动元素高度问题讲解