blocks|key|3037469|text|在less/mixins.less中定义了.clearfix。在其定义的正上方是一条评论，其中包含本文的链接：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3037470|A+new+micro+clearfix+hack|3037471|这篇文章解释了它是如何工作的。|3037472|更新：是的，只有链接的答案是不好的。我知道这一点，甚至在我发布这个答案的时候，但我不认为复制和粘贴是可以的，因为版权，抄袭，等等，你有。然而，我现在觉得这是可以的，因为我已经链接到了原始文章。不过，我还应该提到作者的名字:+Nicolas+Gallagher。下面是本文的要点(请注意，“蒂埃里的方法”指的是Thierry+Koblentz’s+“clearfix+reloaded”)：|BOLD|3037473|3037474|这个“微清除修复”生成伪元素，并将它们的display设置为table。这将创建一个anonymous+table-cell和一个新的块格式化上下文，这意味着:before伪元素可以防止顶部页边距折叠。:after伪元素用于清除浮点数。因此，不需要隐藏任何生成的内容，并且减少了所需的代码总量。|blockquote|3037475|3037476|包含:before选择器并不是清除浮动所必需的，但它可以防止顶部页边距在现代浏览器中崩溃。这有两个好处：|3037477|3037478|3037479|它确保了与创建新块格式化上下文的其他浮动容器技术的视觉一致性，例如，overflow:hidden|unordered-list-item|3037480|It确保了在应用zoom:1时与IE+6/7的视觉一致性。|3037481|3037482|N.B.：在某些情况下，IE+6/7不会在新的块格式上下文中包含浮点数的底边距。更多细节可以在这里找到：Better+float+containment+in+IE+++using+CSS+expressions。|3037483|使用content:"+"+(注意内容字符串中的空格)可以避免在contenteditable属性也出现在HTML中的某个位置时在clearfixed元素周围创建空格的Opera+bug。感谢Sergio+Cerrutti发现了这个修复。另一种解决方法是使用font:0/0+a。|3037484|传统Firefox|3037485|火狐3.5版将受益于使用蒂埃里的方法，并添加visibility:hidden来隐藏插入的字符。这是因为在某些情况下(例如，jsfiddle.net/necolas/K538S/)，遗留版本的火狐需要content:"."来避免在body和它的第一个子元素之间出现额外的空间。|3037486|创建新的块格式化上下文的替代浮点控制方法，例如将overflow:hidden或display:inline-block应用于容器元素，也可以避免在传统版本的Firefox中出现这种行为。|3037487|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twbs/bootstrap/blob/v2.3.0/less/mixins.less|1|http://nicolasgallagher.com/micro-clearfix-hack/|2|http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/|3|http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes|4|http://nicolasgallagher.com/better-float-containment-in-ie/|5|http://codepen.io/anon/full/9454/4|6|http://jsfiddle.net/necolas/K538S/^0|1|G|L|9|1|G|0|0|0|P|1|0|0|0|3|4A|12|2|0|0|K|7|U|5|27|7|2T|6|16|K|3|0|0|2|7|0|0|0|Y|F|0|8|6|0|0|0|4|1G|1I|4|0|2|B|W|F|3L|A|2C|9|5|0|0|M|H|2S|B|37|4|1Q|R|6|0|O|F|14|K|0^^$0|@$1|2|3|4|5|6|7|1V|8|@$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]]|D|@$9|20|A|21|1|22]]|E|$]]|$1|F|3|G|5|6|7|23|8|@]|D|@$9|24|A|25|1|26]]|E|$]]|$1|H|3|I|5|6|7|27|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|28|8|@$9|29|A|2A|B|L]]|D|@$9|2B|A|2C|1|2D]]|E|$]]|$1|M|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|2F|8|@$9|2G|A|2H|B|C]|$9|2I|A|2J|B|C]|$9|2K|A|2L|B|C]|$9|2M|A|2N|B|C]]|D|@$9|2O|A|2P|1|2Q]]|E|$]]|$1|Q|3|-4|5|6|7|2R|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|2S|8|@$9|2T|A|2U|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|2V|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|2W|8|@]|D|@]|E|$]]|$1|V|3|W|5|X|7|2X|8|@$9|2Y|A|2Z|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|X|7|30|8|@$9|31|A|32|B|C]]|D|@]|E|$]]|$1|10|3|-4|5|6|7|33|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|34|8|@$9|35|A|36|B|L]]|D|@$9|37|A|38|1|39]]|E|$]]|$1|13|3|14|5|6|7|3A|8|@$9|3B|A|3C|B|C]|$9|3D|A|3E|B|C]|$9|3F|A|3G|B|C]]|D|@$9|3H|A|3I|1|3J]]|E|$]]|$1|15|3|16|5|6|7|3K|8|@]|D|@]|E|$]]|$1|17|3|18|5|6|7|3L|8|@$9|3M|A|3N|B|C]|$9|3O|A|3P|B|C]|$9|3Q|A|3R|B|C]]|D|@$9|3S|A|3T|1|3U]]|E|$]]|$1|19|3|1A|5|6|7|3V|8|@$9|3W|A|3X|B|C]|$9|3Y|A|3Z|B|C]]|D|@]|E|$]]|$1|1B|3|-4|5|6|7|40|8|@]|D|@]|E|$]]]|1C|$1D|$5|1E|1F|1G|E|$1H|1I]]|1J|$5|1E|1F|1G|E|$1H|1K]]|1L|$5|1E|1F|1G|E|$1H|1M]]|1N|$5|1E|1F|1G|E|$1H|1O]]|1P|$5|1E|1F|1G|E|$1H|1Q]]|1R|$5|1E|1F|1G|E|$1H|1S]]|1T|$5|1E|1F|1G|E|$1H|1U]]]]

<p><code>.clearfix</code> is defined in <a href="https://github.com/twbs/bootstrap/blob/v2.3.0/less/mixins.less"><code>less/mixins.less</code></a>. Right above its definition is a comment with a link to this article:</p>

<p><a href="http://nicolasgallagher.com/micro-clearfix-hack/">A new micro clearfix hack</a></p>

<p>The article explains how it all works.</p>

<p><strong>UPDATE:</strong> Yes, link-only answers are bad. I knew this even at the time that I posted this answer, but I didn't feel like copying and pasting was OK due to copyright, plagiarism, and what have you. However, I now feel like it's OK since I have linked to the original article. I should also mention the author's name, though, for credit: Nicolas Gallagher. Here is the meat of the article (note that "Thierry’s method" is referring to <a href="http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/">Thierry Koblentz’s “clearfix reloaded”</a>):</p>

<blockquote>
  <p>This “micro clearfix” generates pseudo-elements and sets their
  <code>display</code> to <code>table</code>. This creates an <a href="http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes">anonymous table-cell</a> and a
  new block formatting context that means the <code>:before</code> pseudo-element
  prevents top-margin collapse. The <code>:after</code> pseudo-element is used to
  clear the floats. As a result, there is no need to hide any generated
  content and the total amount of code needed is reduced.</p>
  
  <p>Including the <code>:before</code> selector is <em>not</em> necessary to clear the
  floats, but it <strong>prevents</strong> top-margins from collapsing in modern
  browsers. This has two benefits:</p>
  
  <ul>
  <li><p>It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g.,
  <code>overflow:hidden</code></p></li>
  <li><p>It ensures visual consistency with IE 6/7 when <code>zoom:1</code> is applied.</p></li>
  </ul>
  
  <p><strong>N.B.</strong>: There are circumstances in which IE 6/7 will not contain the bottom margins of floats within a new block formatting context.
  Further details can be found here: <a href="http://nicolasgallagher.com/better-float-containment-in-ie/">Better float containment in IE
  using CSS expressions</a>.</p>
  
  <p>The use of <code>content:" "</code> (note the space in the content string) avoids
  an <a href="http://codepen.io/anon/full/9454/4">Opera bug</a> that creates space around clearfixed elements if the
  <code>contenteditable</code> attribute is also present somewhere in the HTML.
  Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is
  to use <code>font:0/0 a</code>.</p>
  
  <h1>Legacy Firefox</h1>
  
  <p>Firefox &lt; 3.5 will benefit from using Thierry’s method with the
  addition of <code>visibility:hidden</code> to hide the inserted character. This
  is because legacy versions of Firefox need <code>content:"."</code> to avoid
  extra space appearing between the <code>body</code> and its first child element,
  in certain circumstances (e.g., <a href="http://jsfiddle.net/necolas/K538S/">jsfiddle.net/necolas/K538S/</a>.)</p>
  
  <p>Alternative float-containment methods that create a new block
  formatting context, such as applying <code>overflow:hidden</code> or
  <code>display:inline-block</code> to the container element, will also avoid this
  behaviour in legacy versions of Firefox.</p>
</blockquote>


blocks|key|2824727|text|clearfix+hack本身的不需要:before伪元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|2824728|这只是一个额外的很好的特性，可以帮助防止第一个子元素的边距崩溃的。因此，"+clearfixed“元素的子块元素的上边界被保证位于clearfixed元素的上边界之下。|2824729|之所以使用display:table，是因为display:block做不到这一点。即使使用:before元素，使用display:block边距也会折叠。|2824730|有一个警告:如果在具有明确固定的<div>元素的表单元格中使用vertical-align:baseline，则Firefox将不会很好地对齐。那么您可能更喜欢使用display:block，尽管失去了防折叠功能。如果有进一步的兴趣，请阅读本文：Clearfix+interfering+with+vertical-align。|2824731|entityMap|0|LINK|mutability|MUTABLE|url|http://www.running-bits.de/index.php/clearfix-interfering-with-vertical-align/^0|J|7|T|1|0|0|2C|0|0|26|5|D|M|D|1A|7|1M|D|0|0|4K|G|5|V|N|2A|D|3F|14|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|Z|8|@$9|10|A|11|B|D]]|E|@]|F|$]]|$1|I|3|J|5|6|7|12|8|@$9|13|A|14|B|D]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|E|@]|F|$]]|$1|K|3|L|5|6|7|1D|8|@$9|1E|A|1F|B|D]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|E|@$9|1M|A|1N|1|1O]]|F|$]]|$1|M|3|-4|5|6|7|1P|8|@]|E|@]|F|$]]]|N|$O|$5|P|Q|R|F|$S|T]]]]

<p>The <code>:before</code> pseudo element <strong>isn't needed for the clearfix hack itself</strong>. </p>

<p>It's just an additional nice feature helping to <strong>prevent margin-collapsing</strong> of the first child element. Thus the top margin of an child block element of the "clearfixed" element is guaranteed to be positioned below the top border of the clearfixed element.</p>

<p><code>display:table</code> is being used because <code>display:block</code> doesn't do the trick. Using <code>display:block</code> margins will collapse even with a <code>:before</code> element.</p>

<p>There is one caveat: if <code>vertical-align:baseline</code> is used in table cells with clearfixed <code>&lt;div&gt;</code> elements, Firefox won't align well. Then you might prefer using <code>display:block</code> despite loosing the anti-collapsing feature. In case of further interest read this article: <a href="http://www.running-bits.de/index.php/clearfix-interfering-with-vertical-align/">Clearfix interfering with vertical-align</a>.</p>


blocks|key|197682|text|当在父容器中使用clearfix时，它会自动环绕所有子元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|197683|它通常在浮动元素之后使用，以清除浮动布局。|197684|当使用浮动布局时，它将水平对齐子元素。Clearfix清除了这种行为。|197685|示例-引导程序面板|offset|length|style|BOLD|197686|在bootstrap中，当使用类panel时，有3个子类型:+panel-header，panel-body，panel-footer。所有这些都有display:block布局，但是panel-body已经预先应用了一个清晰的补丁。panel-body是一个主要的容器类型，而panel-header+&+panel-footer并不是一个容器，它只是用来保存一些基本的文本。|197687|如果添加了浮动元素，则父容器不会围绕这些元素，因为父容器不会继承浮动元素的高度。|197688|因此，对于panel-header和panel-footer，需要clearfix来清除元素的浮动布局:+Clearfix类给出了一种视觉外观，即父容器的高度已经增加，以容纳其所有子元素。|197689|+<div+class="container">
++++<div+class="panel+panel-default">
++++++++<div+class="panel-footer">
++++++++++++<div+class="col-xs-6">
++++++++++++++++<input+type="button"+class="btn+btn-primary"+++value="Button1">
++++++++++++++++<input+type="button"+class="btn+btn-primary"+++value="Button2">
++++++++++++++++<input+type="button"+class="btn+btn-primary"+++value="Button3">
++++++++++++</div>
++++++++</div>
++++</div>

++++<div+class="panel+panel-default">
++++++++<div+class="panel-footer">
++++++++++++<div+class="col-xs-6">
++++++++++++++++<input+type="button"+class="btn+btn-primary"+++value="Button1">
++++++++++++++++<input+type="button"+class="btn+btn-primary"+++value="Button2">
++++++++++++++++<input+type="button"+class="btn+btn-primary"+++value="Button3">
++++++++++++</div>
++++++++++++<div+class="clearfix"/>
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|197690|​|197691|📷|atomic|197692|197693|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/6c2163301c517308abe7ddf48f1d76f5.png|imageAlt^0|0|0|0|0|9|0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1C|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1D|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1E|8|@$H|1F|I|1G|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1H|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1I|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1J|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1K|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1L|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|10|7|1M|8|@]|9|@$H|1N|I|1O|1|1P]]|A|$]]|$1|11|3|X|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19|1A|-4]]]]

<p>When a clearfix is used in a parent container, it automatically wraps around all the child elements.</p>

<p>It is usually used after floating elements to clear the float layout.</p>

<p>When float layout is used, it will horizontally align the child elements. 
Clearfix clears this behaviour.</p>

<p><strong>Example - Bootstrap Panels</strong></p>

<p>In bootstrap, when the class panel is used, there are 3 child types: panel-header, panel-body, panel-footer.
All of which have display:block layout but panel-body has a clearfix pre-applied.
panel-body is a main container type whereas panel-header &amp; panel-footer isn't intended to be a container, it is just intended to hold some basic text.</p>

<p>If floating elements are added, the parent container does not get wrapped around those elements because the height of floating elements is not inherited by the parent container.</p>

<p>So for panel-header &amp; panel-footer, clearfix is needed to clear the float layout of elements:
Clearfix class gives a visual appearance that the height of the parent container has been increased to accommodate all of its child elements.</p>

<pre><code> &lt;div class="container"&gt;
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-footer"&gt;
            &lt;div class="col-xs-6"&gt;
                &lt;input type="button" class="btn btn-primary"   value="Button1"&gt;
                &lt;input type="button" class="btn btn-primary"   value="Button2"&gt;
                &lt;input type="button" class="btn btn-primary"   value="Button3"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-footer"&gt;
            &lt;div class="col-xs-6"&gt;
                &lt;input type="button" class="btn btn-primary"   value="Button1"&gt;
                &lt;input type="button" class="btn btn-primary"   value="Button2"&gt;
                &lt;input type="button" class="btn btn-primary"   value="Button3"&gt;
            &lt;/div&gt;
            &lt;div class="clearfix"/&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/ElfRx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ElfRx.png" alt="see an example photo here"></a></p>


<pre><code>.clearfix {
  *zoom: 1;
  &amp;:before,
  &amp;:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &amp;:after {
    clear: both;
  }
}
</code></pre>

<ol>
<li>Why not use <code>display:block</code>?</li>
<li>In addition, why does it also apply to the <code>::before</code> pseudoclass?</li>
</ol>


Understanding Bootstrap's clearfix class

容器

.clearfix {  *zoom: 1;  &:before,  &:after {    display: table;    content: "";    // Fixes Opera/contenteditable bug:    // http://nicolasgallagher.com/micro-c...

问理解Bootstrap的clearfix类
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问理解Bootstrap的clearfix类EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问理解Bootstrap的clearfix类
EN