CSS clear - CSS

简介

CSS clear（清除浮动）是一种常见的 CSS 布局技巧，它用于解决浮动元素对布局所带来的不利影响。清除浮动后，可以保证父元素正确计算高度，并且子元素正确对齐。该技巧适用于各种布局场景，如网页导航菜单、图片与文字结合、两栏布局等。

在 CSS 中，有多种方式可以实现清除浮动，例如在父元素中添加一个 clear 属性、在浮动元素的后面添加一个空标签和设置父元素 overflow 属性等。

示例

1. 添加 clear 属性

.clearfix {
  clear: both;
}

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-left"></div>
</div>

在父元素上添加 clear 属性可在浮动元素的下方创建一个新的块格式化上下文，以清除浮动。在上述示例中，.clearfix 为父元素添加了 clear: both 属性，从而将浮动的子元素清除。

2. 使用空标签

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

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-left"></div>
</div>

在浮动元素的后方添加一个空的块级元素，然后将其清除。这种方式更简单，也更优雅，并且避免了向 HTML 中添加多余的标记。注意，必须将空标签设置为块级元素，否则 clear 属性不会生效。

3. 设置 overflow 属性

.parent {
  overflow: auto;
}

<div class="parent">
  <div class="float-left"></div>
  <div class="float-left"></div>
</div>

将父元素设置为一个新的块格式化上下文，并将 overflow 属性设置为 auto 或 hidden。这种方式在 Mozilla Firefox 和 Opera 中表现良好，但在其他浏览器中可能会出现意外的副作用。

总结

以上是三种常用的 CSS 清除浮动技巧，每种方法都有其优缺点。在实际项目中，可以根据需求和浏览器兼容性选择最适合的方式。