css 清除浮动的新方法

CSS 中清除浮动的方法是在布局中经常用到的技巧，其中比较流行的方法有 clear:both 和使用空标签清除浮动。但是这些方法存在一些缺陷，例如添加多余的 HTML 元素或者必须在每个浮动元素后手动添加 clear:both。为了解决这些问题，现在有一些比较新的 CSS 清除浮动的方法。

一、::after 伪元素清除浮动

使用 ::after 伪元素清除浮动是一种比较新的方法，它不需要添加多余的 HTML 元素。

步骤

• 在父元素上添加 overflow:hidden 或者 auto 属性
• 在父元素上使用 ::after 伪元素
• 在 ::after 伪元素中添加 clear:both CSS 属性

示例 1，在一个管理容器中定义一个 .clearfix CSS类。

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

.clearfix {
  *zoom:1;//兼容IE6，7浏览器
}

使用示例 1，代码生成基本HTML结构如下：

<div class="content clearfix">
  <div class="float-left">左侧浮动元素</div>
  <div class="float-right">右侧浮动元素</div>
</div>

二、使用contain-floats属性

contain-floats 是一种新的 CSS 属性，用于清除包含浮动的容器的高度限制.

步骤

• 将 contain-floats 属性应用于包含浮动的容器。
• 设置包含浮动的容器的高度为 100% 或一个合适的值。

示例 2，使用“contain-floats”属性清除浮动。

.container {
  contain-floats: both;
  height: 100%;
}

使用示例 2，代码生成基本HTML结构如下：

<div class="container">
  <div class="float-left">左侧浮动元素</div>
  <div class="float-right">右侧浮动元素</div>
</div>

以上就是两种比较新的 CSS 清除浮动的方法。同时，也要注意在实际开发中，要根据具体情况选用不同的方法。