在 CSS 中清除浮动的各种技术

在 CSS 中，由于浮动元素会脱离文档流，可能导致容器高度失效，而造成布局问题。因此，需要使用清除浮动的技术。

以下是几种常用的技术：

1. 使用clear属性

使用clear属性，使得元素产生一个新行并清除之前浮动元素的影响。常用的clear属性取值有：

• clear: left ：清除左侧浮动元素的影响。
• clear: right ：清除右侧浮动元素的影响。
• clear: both ：清除左右两侧浮动元素的影响。
• clear: none ：保留之前元素的浮动状态，默认值。

示例代码：

.clearfix {
  clear: both;
}

2. 使用overflow属性

设置overflow为非visible的值，将会形成BFC，自动清除浮动。常用的overflow属性取值有：

• overflow: auto
• overflow: hidden
• overflow: scroll

示例代码：

.clearfix {
  overflow: hidden;
}

3. 使用伪元素::after

用::after伪元素清除浮动比较常用，也是新增的一种方法。利用伪元素把clearfix样式添加到最后一个子元素之后，撑开容器高度，达到清除浮动的效果。

示例代码：

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

4. 使用伪元素::before和::after

利用::before和::after配合zoom:1解决IE6,7浮动问题，同时也可以解决其他浏览器的问题。

示例代码：

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

以上就是在CSS中清除浮动的各种技术。不同的场景下选择不同的技术能有效解决各种浮动问题，提高布局的稳定性和可维护性。