什么是clearfix? - Code

最近我在浏览一些网站的代码，看到每个<div>都有一个类clearfix。

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

你能提供一些例子的布局与一个clearfix，比较没有一个布局clearfix?

当前回答

在CSS基于浮动的布局中常用的一种技术是将少量CSS属性分配给你知道将包含浮动元素的元素。该技术通常使用名为clearfix的类定义来实现，(通常)实现以下CSS行为:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

这些组合行为的目的是创建一个容器:在活动元素之后，包含一个单独的'。'标记为隐藏，这将清除所有预先存在的浮动，并有效地重置页面的下一段内容。

2011-12-18 19:09:41

其他回答

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

值得注意的是，如今，使用浮动元素进行布局的做法越来越不受欢迎，人们开始使用更好的替代方法。

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

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

详细的浏览器列表请参见:https://caniuse.com/flexbox。

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

clearfix是一种元素自动清除其子元素的方法，这样您就不需要添加额外的标记。它通常用于浮动布局中，其中元素被浮动以水平堆叠。

clearfix是一种解决浮动元素零高度容器问题的方法

clearfix的执行如下:

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

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

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

通常你需要做以下事情:

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

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

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

阅读这篇由Chris Coyer @ CSS-Tricks撰写的文章

2011-12-18 19:04:24

什么是Clearfix?

一种元素自动清除其子元素的方法，无需任何额外标记。

使用属性:CSS clearfix用于修复来自所需元素的溢出元素。这可以使用3个属性:

溢出财产高度属性浮动属性

这3个CSS属性都用于修复溢出元素。

为什么ClearFix ?

为了避免添加不必要的标记，元素可以使用clearfix自动清除或修复其元素。它被用于浮动布局，其中元素被浮动以形成水平堆栈。

当Clearfix ?

当两个或两个以上的浮动项目放在一起时。

当项目以这种方式定位时，父容器的高度为0，这很容易弄乱布局。浏览器之间的问题是不一致的，这使得问题更加困难。为了解决所有这些问题，创建了clearfix。

是这样的:

示例(供您理解):

<head> <style> div { border: 3px solid #4CAF50; padding: 5px; } .img1 { float: right; } .img2 { float: right; } .clearfix { overflow: auto; } </style> </head> <body> <h2>Without Clearfix</h2> <p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... </div> <h2 style="clear:right">With Clearfix</h2> <p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... </div> </body>

以上代码输出:

Clearfix正在过时吗?

在它第一次被提出并在2007年和2013年进行了更新后，将近15年的今天，clearfix已经失去了相关性，因为今天CSS Grid和Flexbox正在填补web上高级布局的空白。

希望能有所帮助。

2023-01-30 08:46:58

实现clearfix的另一个(也许是最简单的)选项是使用overflow:hidden;在包含元素上。例如

.parent { 背景:红色; 溢出:隐藏; ｝ .segment-a { 浮:左; ｝ .segment-b { 浮:正确; ｝ < div class = "父" > < div class = "分割一个" > 左浮动 < / div > < div class = "段b”> 浮动对吧 < / div > < / div >

当然，这只能在您不希望内容溢出的情况下使用。

2015-04-19 08:39:11

我尝试了接受的答案，但我仍然有一个问题的内容对齐。添加如下所示的“:before”选择器修复了这个问题:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

上面的LESS将编译为下面的CSS:

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

2016-01-13 00:56:39

其他答案都是正确的。但我想补充的是，当人们第一次学习CSS时，它是一个时代的遗迹，滥用float来做所有的布局。Float是用来在长文本旁边放置浮动图像的，但很多人把它作为主要的布局机制。因为这并不是真正的目的，你需要像“clearfix”这样的技巧来让它工作。

如今，display: inline-block是一个可靠的选择(除了IE6和IE7)，尽管更多的现代浏览器正在推出更有用的布局机制，如flexbox, grid layout等。

2011-12-18 19:08:39

aliyun