什么是clearfix？ [英] What is a clearfix?

问题描述

最近我通过一些网站的代码，看到每个< div> 有一个类 clearfix 。

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

经过快速的Google搜索，我了解到它有时是IE6的，但实际上是是一个clearfix？

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

您可以提供一些带有clearfix的布局示例，相比之下没有clearfix的布局吗？

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

推荐答案

如果你不需要支持IE9或更低版本，你可以自由地使用flexbox，而不需要使用浮动布局。

值得注意的是，今天，使用浮动元素的布局越来越不喜欢使用更好的替代品。

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 - 最佳（但浏览器支持有限）

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

Flexbox支持Firefox 18，Chrome 21，Opera 12.10，Internet Explorer 10，Safari 6.1（包括Mobile Safari）和Android的默认浏览器4.4。

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.

浏览器列表请参阅： http://caniuse.com/flexbox 。

（ ）

一个clearfix是一个可以修改的元素，元素自动清除其子元素的方式，以便您不需要添加其他标记。

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.

clearfix是一种克服 零高度容器问题 。

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

如下执行clearfix：

A clearfix is performed as follows:

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

或者，如果您不需要IE< 8支持，也太：

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>

使用clearfix时，您只需要

With clearfix, you only need to

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

阅读 本文 - Chris Coyer @ CSS-Tricks

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

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