返回

揭秘清除浮动的魔法，掌控页面布局

前端

清除浮动，重拾页面布局掌控权

浮动元素，就像一群自由散漫的孩子，只顾着自己的天马行空，却全然不顾父元素的感受。它们游离在外，使父元素的高度塌陷，破坏原本和谐的页面布局。此刻，清除浮动便如一记魔咒，轻松化解这场布局危机。

浮动的本质与陷阱

浮动元素脱离了文档流的正常顺序，在水平方向上随心所欲地漂移。这是双刃剑，既赋予了元素自由自在的定位能力，也带来了父元素高度塌陷的烦恼。原因在于，浮动元素在脱离文档流后，不再参与父元素的布局计算，导致父元素无法获取其高度信息。

清除浮动的魔法咒语

清除浮动的方法有很多，但本质都是相同：让父元素知道，其子元素已经浮动完毕，是时候重新计算高度了。常用的清除浮动咒语包括：

1. 清除元素：clearfix

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

2. 空标签：

3. 双重清除：overflow hidden + clear both

.parent {
  overflow: hidden;
}

.child {
  float: left;
  clear: both;
}

4. 伪元素：::after

.parent::after {
  content: "";
  clear: both;
}

实战演练，化解高度塌陷危机

现在，让我们将清除浮动的魔法咒语付诸实践。假设我们有一个父元素 .parent，其中包含两个浮动元素 .child1 和 .child2。在未清除浮动的情况下，.parent 的高度会塌陷。

<div class="parent">
  <div class="child1" style="float: left;">子元素1</div>
  <div class="child2" style="float: left;">子元素2</div>
</div>

使用 clearfix 类清除浮动：

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

<div class="parent clearfix">
  <div class="child1" style="float: left;">子元素1</div>
  <div class="child2" style="float: left;">子元素2</div>
</div>

浮动元素被乖乖纳入父元素的怀抱，父元素的高度也恢复了正常。布局危机解除，页面重获和谐。

结语

清除浮动是 CSS 布局中的一项基本技能，掌握它可以让你轻松掌控页面布局，打造出赏心悦目的网页。愿这篇文章为你开启清除浮动的奇妙之旅，助你在网页设计的道路上如虎添翼。