CSS CSS清除的真正原理是什么

在本文中，我们将介绍CSS中清除浮动及其真正原理。清除浮动是指解决在父元素中包含浮动元素时，父元素无法正确包裹浮动元素的问题。

阅读更多：CSS 教程

什么是浮动？

在CSS中，浮动是一种布局方式，它允许元素在文档流中脱离正常位置并向左或向右移动。浮动元素之后的元素将围绕在其周围。

浮动产生的问题

当父元素包含浮动元素时，父元素将无法正确计算高度，从而导致父元素无法正确包裹浮动元素，造成布局混乱。

清除浮动的方法

1. 使用clear属性

清除浮动最常用的方法是在父元素中添加一个空的块级元素，并为其设置clear属性。clear属性用于指定元素的两侧不允许浮动元素。例如：

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

这里我们使用了伪元素::after，将其内容设置为空字符串，然后为其添加display属性值为table，使其成为一个块级元素。最后，通过clear属性将元素的两侧都设置为不允许浮动元素。

2. 使用overflow属性

除了使用clear属性外，还可以使用overflow属性来清除浮动。将父元素的overflow属性设置为hidden或auto，可以触发BFC（块级格式化上下文），从而清除浮动。

.parent {
  overflow: hidden;
}

3. 使用clearfix类

另一种常用的清除浮动方法是使用clearfix类。clearfix类是一种常见的命名约定，通常添加在父元素上，通过为其添加一些CSS规则来清除浮动。

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

.parent {
  *zoom: 1; /* 触发IE的hasLayout机制 */
}

.clearfix:after, .clearfix:before {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1; /* 触发IE的hasLayout机制 */
}

清除浮动的原理

1. 清除浮动的本质

清除浮动的本质就是为父元素创建一个新的块级格式化上下文（BFC），从而使父元素能够正确包裹浮动元素。新的BFC拥有自己的渲染规则，与外部的元素相互隔离。

2. BFC的特性

创建BFC的元素具有以下特性：

• 内部的块级元素会上下相邻排列，不会漂浮或覆盖浮动元素；
• BFC的高度会包含其内部浮动元素的高度；
• BFC不会与浮动元素重叠。

3. 清除浮动的原理

使用clear属性、overflow属性或clearfix类来清除浮动的本质是触发BFC。在这些方法中，通过为父元素添加一个包含浮动元素的块级元素、设置overflow属性或添加clearfix类来创建新的BFC。

示例

<div id="parent">
  <div class="float-left"></div>
  <div class="float-right"></div>
  <div class="clearfix"></div>
</div>

.float-left {
  float: left;
}

.float-right {
  float: right;
}

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

总结

清除浮动是解决包含浮动元素时布局混乱的常用方法。通过创建新的块级格式化上下文(BFC)，可以使父元素正确包裹浮动元素。常用的清除浮动方法包括使用clear属性、overflow属性或clearfix类。清除浮动的原理就是触发BFC，让父元素具备正确包裹浮动元素的能力。