什么是清除修复? [英] What is a clearfix?

问题描述

最近我在浏览一些网站的代码，发现每个

都有一个clearfix类.

在谷歌快速搜索后，我了解到它有时适用于 IE6，但实际上是什么?

您能否提供一些带有 clearfix 的布局与没有 clearfix 的布局相比的示例?

解决方案

如果不需要支持IE9以下，可以自由使用flexbox，不需要使用浮动布局.

值得注意的是，如今，随着更好的替代品的使用，使用浮动元素进行布局越来越不受欢迎.

• display: inline-block - 更好
• Flexbox - 最佳(但有限的浏览器支持)

Firefox 18、Chrome 21、Opera 12.10 和 Internet Explorer 10、Safari 6.1(包括 Mobile Safari)和 Android 的默认浏览器 4.4 支持 Flexbox.

有关详细的浏览器列表，请参阅:https://caniuse.com/flexbox.

(也许一旦它的位置完全确定，它可能是绝对推荐的元素布局方式.)

<小时>

清除修复是元素自动清除其子元素的一种方式，因此您无需添加额外的标记.它通常用于 浮动布局，其中元素浮动以水平堆叠.

clearfix 是一种解决零高度容器问题 用于浮动元素

清除修复执行如下:

.clearfix:after {内容: " ";/* 旧版浏览器不支持空内容 */可见性:隐藏；显示:块；高度:0；清楚:两者；}

或者，如果您不需要 IE<8 支持，以下也可以:

.clearfix:after {内容: "";显示:表；清楚:两者；}

通常您需要执行以下操作:

<div style="float: left;">侧边栏</div><div style="clear: both;"></div><!-- 清除浮动 -->

使用 clearfix，您只需要以下内容:

<div style="float: left;"class="clearfix">侧边栏</div><!-- 没有清除 div！-->

阅读这篇文章 - Chris Coyer @ CSS-Tricks

Recently I was looking through some website's code, and saw that every <div> had a class clearfix.

After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix?

Could you provide some examples of a layout with a clearfix, compared to a layout without a clearfix?

解决方案

If you don't need to support IE9 or lower, you can use flexbox freely, and don't need to use floated layouts.

It's worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.

• display: inline-block - Better
• Flexbox - Best (but limited browser support)

Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android's default browser 4.4.

For a detailed browser list see: https://caniuse.com/flexbox.

(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)

---

A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.

The clearfix is a way to combat the zero-height container problem for floated elements

A clearfix is performed as follows:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Or, if you don't require IE<8 support, the following is fine too:

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

Normally you would need to do something as follows:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

With clearfix, you only need the following:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

Read about it in this article - by Chris Coyer @ CSS-Tricks

这篇关于什么是清除修复?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！