css之clearfix的用法深入理解(必看篇)

CSS之clearfix的用法深入理解

简介

clearfix 是一种使用 CSS 技术清除浮动的方法。清除浮动后，可以让父元素包含子元素的浮动高度。

原理

1. 产生浮动的元素会脱离文档的流，不再占据文档空间。
2. 父元素如果没有设置高度，则高度为0。子元素设置浮动后，父元素的高度并不会随着子元素高度的改变而改变，即父元素不会自动包含子元素的高度。
3. clearfix 的原理是：通过在父容器末尾插入一个“占位容器”，并对该容器应用一定的样式，从而使其自动包含子元素的浮动高度。

下面是 clearfix 样式的实现：

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

该样式会在父元素的末尾插入一个空的 ::after 伪元素，用来清除浮动。

清除浮动的方法

1. 使用空元素清除浮动

在浮动元素的最后一个元素之后，插入一个空元素，然后为该元素添加 clear: both 样式，从而使父元素自动包含子元素的浮动高度。这种方法已经不再推荐使用，因为它会导致 DOM 中插入冗余的元素。

示例代码：

<p class="clearfix">
  <p class="floated-elem"></p>
  <p class="floated-elem"></p>
  <p class="clear"></p>
</p>

.clear { clear: both; }

2. 使用 “伪元素” 清除浮动

可以使用 :before 或 :after 伪元素来清除浮动。

示例代码：

<p class="clearfix">
  <p class="floated-elem"></p>
  <p class="floated-elem"></p>
</p>

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

注意事项

1. clearfix 只对子元素应用清除浮动规则，不会对其自身应用。
2. 在 IE6 中，min-height属性不能被正确识别，只能通过设置 height 属性来实现自适应高度。
3. 在 IE6~7 中，容器也需要设置浮动，才能让容器内容自适应高度。
4. 为避免冲突，建议定义一个全局 .clearfix 的 class 用于清除浮动。

示例说明

示例一

示例一是一个浮动元素未被清除浮动的情况，可以看到后面的盒子（兰色）因为浮动的存在而无法正常被包含在父盒子内，超出了父盒子边界。

<p class="wrapper">
  <p class="box"></p>
  <p class="box"></p>
  <p class="box"></p>
  <p style="clear: both;"></p>
  <p class="box" style="background-color: lightblue;"></p>
</p>

.wrapper {
  border: 1px solid #000;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  float: left;
  margin: 10px;
}

示例二

示例二是使用 clearfix 清除浮动后的情况，可以看到兰色盒子正常被包含在父盒子内，不会超出父盒子边界，效果更加美观。

<p class="wrapper clearfix">
  <p class="box"></p>
  <p class="box"></p>
  <p class="box"></p>
  <p class="box" style="background-color: lightblue;"></p>
</p>

.wrapper {
  border: 1px solid #000;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  float: left;
  margin: 10px;
}

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