blocks|key|316214|text|你试过这个吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316215|<div+style="clear:both;"/>|code-block|syntax|javascript|316216|我对这种方法没有任何问题。|316217|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Have you tried this:</p>

<pre><code>&lt;div style="clear:both;"/&gt;
</code></pre>

<p>I haven't had any problems with this method.</p>


blocks|key|193355|text|我在官方的CLEARFIX-方法中发现了一个错误:+DOT没有字体大小。如果您设置了height+=+0，并且DOM-Tree中的第一个元素具有“清除”类，那么在12+of+:的页面底部总是有一个空白。)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|193356|你必须这样解决它：|193357|/*+float+clearing+for+everyone+else+*/
.clearfix:after{
++clear:+both;
++content:+".";
++display:+block;
++height:+0;
++visibility:+hidden;
++font-size:+0;
}|code-block|syntax|javascript|193358|现在是YAML布局的一部分.看一看--很有趣！http://www.yaml.de/en/home.html|193359|entityMap|0|LINK|mutability|MUTABLE|url|http://www.yaml.de/en/home.html^0|16|A|0|0|0|N|V|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>I've found a bug in the official CLEARFIX-Method:
The DOT doesn't have a font-size.
And if you set the <code>height = 0</code> and the first Element in your DOM-Tree has the class "clearfix" you'll allways have a margin at the bottom of the page of 12px :)</p>

<p>You have to fix it like this:</p>

<pre><code>/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}
</code></pre>

<p>It's now part of the YAML-Layout ... Just take a look at it - it's very interesting!
<a href="http://www.yaml.de/en/home.html" rel="noreferrer">http://www.yaml.de/en/home.html</a></p>


blocks|key|316243|text|溢出属性可用于清除浮标，无需附加标记：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316244|.container+{+overflow:+hidden;+}|code-block|syntax|javascript|316245|这适用于除IE6之外的所有浏览器，您所需要做的就是启用hasLayout+(缩放是我的首选方法)：|316246|.container+{+zoom:+1;+}|316247|http://www.quirksmode.org/css/clearing.html|offset|length|316248|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|17|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

<p>The overflow property can be used to clear floats with no additional mark-up:</p>

<pre class="lang-css prettyprint-override"><code>.container { overflow: hidden; }
</code></pre>

<p>This works for all browsers except IE6, where all you need to do is enable hasLayout (zoom being my preferred method):</p>

<pre class="lang-css prettyprint-override"><code>.container { zoom: 1; }
</code></pre>

<p><a href="http://www.quirksmode.org/css/clearing.html" rel="noreferrer">http://www.quirksmode.org/css/clearing.html</a></p>


blocks|key|193408|text|如果浮动容器有一个父元素，那么使用overflow:hidden/auto和ie6的高度就足够了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|193409|任何一种#测试都可以工作，下面所述的HTML可以清除浮点数。|193410|#test+{
++overflow:hidden;+//+or+auto;
++_height:1%25;+forces+hasLayout+in+IE6
}

<div+id="test">
++<div+style="floatLeft"></div>
++<div+style="random"></div>
</div>|code-block|syntax|javascript|193411|在拒绝使用ie6的情况下，只需将父节点浮动以清除float即可。|193412|#test+{
++float:+left;+//+using+float+to+clear+float
++width:+99%25;
}|193413|从来没有真正需要任何其他类型的清理。也许这就是我写HTML的方式。|193414|entityMap^0|H|F|X|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

<p>Using <code>overflow:hidden</code>/<code>auto</code> and height for ie6 will suffice if the floating container has a parent element. </p>

<p>Either one of the #test could work, for the HTML stated below to clear floats.</p>

<pre class="lang-css prettyprint-override"><code>#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

&lt;div id="test"&gt;
  &lt;div style="floatLeft"&gt;&lt;/div&gt;
  &lt;div style="random"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>In cases when this refuses to work with ie6, just float the parent to clear float. </p>

<pre class="lang-css prettyprint-override"><code>#test {
  float: left; // using float to clear float
  width: 99%;
}
</code></pre>

<p>Never really needed any other kind of clearing yet. Maybe it's the way I write my HTML.</p>


blocks|key|192956|text|根据正在产生的设计，下面的每个clearfix解决方案都有它自己的好处。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|192957|清除程序确实有有用的应用程序，但它也被用作黑客。在使用清除之前，这些现代的css解决方案可能是有用的：|192958|192959|css+flexbox|unordered-list-item|offset|length|192960|css+grid|192961|192962|192963|现代Clearfix解决方案|192964|192965|带overflow:+auto;的容器|style|CODE|192966|清除浮动元素的最简单方法是对包含的元素使用样式overflow:+auto。这种解决方案适用于每一种现代浏览器。|192967|<div+style="overflow:+auto;">
++<img
++++style="float:+right;"
++++src="path/to/floated-element.png"
++++width="500"
++++height="500"
++>+
++<p>Your+content+here…</p>
</div>|code-block|syntax|javascript|192968|在外部元素上使用某些边距和填充的组合可能会导致滚动条的出现，但这可以通过将边距和填充放在另一个包含元素的父元素上来解决。|192969|使用“溢出:隐藏”也是一个清除的解决方案，但是不会有滚动条，但是使用hidden会裁剪位于包含元素之外的任何内容。|192970|注意:在本例中，浮动元素是一个img标记，但可以是任何html元素。|192971|192972|Clearfix重装|192973|蒂埃里·科布伦茨在CSSMojo上写道：The+very+latest+clearfix+reloaded。他指出，通过放弃对oldIE的支持，解决方案可以简化为一个css语句。此外，使用display:+block+(而不是display:+table)允许在具有clearfix的元素是兄弟元素时正确折叠边距。|192974|.container::after+{
++content:+"";
++display:+block;
++clear:+both;
}|192975|这是最现代版本的清除。|192976|192977|⋮|192978|192979|旧Clearfix解决方案|192980|下面的解决方案对于现代浏览器来说并不是必需的，但是对于针对旧的浏览器来说可能是有用的。|192981|请注意，这些解决方案依赖于浏览器错误，因此，只有在上述解决方案都不适合您的情况下才能使用。|192982|它们大致按时间顺序排列。|192983|192984|“击败那个ClearFix"，这是现代浏览器的明确解决方案。|192985|CSS+Mojo的Thierry指出，当针对现代浏览器时，我们现在可以删除zoom和::before属性/值，只需使用：|192986|.container::after+{
++++content:+"";
++++display:+table;
++++clear:+both;
}|192987|此解决方案不支持IE6/7…故意的！|192988|蒂埃里还提出："A+word+of+caution：如果你从头开始一个新项目，那就去做吧，但不要用你现在的技术来交换，因为即使你不支持oldIE，你现有的规则也能防止利润崩溃。“|192989|192990|微Clearfix|192991|最新的和全球采用的clearfix解决方案，Micro+Clearfix+by+Nicolas+Gallagher。|192992|已知支持:火狐3.5%2B，Safari+4%2B，Chrome，Opera+9%2B，IE+6%2B|192993|.container::before,+.container::after+{
++content:+"";
++display:+table;
}
.container::after+{
++clear:+both;
}
.container+{
++zoom:+1;
}|192994|192995|溢出特性|192996|对于通常的情况，这个基本方法是首选的，当定位的内容不会显示在容器的边界之外时。|192997|http://www.quirksmode.org/css/clearing.html+-解释了如何解决与此技术相关的常见问题，即在容器上设置width:+100%25。|192998|.container+{
++overflow:+hidden;
++display:+inline-block;
++display:+block;
}|192999|与其使用display属性为IE设置"hasLayout“，还可以将其他属性用于triggering+"hasLayout"+for+an+element。|193000|.container+{
++overflow:+hidden;
++zoom:+1;
++display:+block;
}|193001|使用overflow属性清除浮动的另一种方法是使用underscore+hack。IE将应用以下划线为前缀的值，其他浏览器则不会。zoom属性在IE中触发hasLayout：|193002|.container+{
++overflow:+hidden;
++_overflow:+visible;+/*+for+IE+*/
++_zoom:+1;+/*+for+IE+*/
}|193003|虽然这起作用..。使用黑客并不理想。|193004|193005|派:简单的清除方法|193006|这种较老的“轻松清除”方法的优点是允许定位的元素挂在容器的边界之外，而代价是更复杂的CSS。|193007|这个解决方案是很古老的，但是您可以了解到轻松清除位置是一切：http://www.positioniseverything.net/easyclearing.html|193008|193009|使用“清除”属性的|193010|快速和肮脏的解决方案(有一些缺点)，当你快速地拍打一些东西：|193011|<br+style="clear:+both"+/>+|193012|弊端|193013|193014|，它没有响应，因此如果基于媒体查询改变布局样式，可能无法提供所需的效果。纯CSS中的解决方案更为理想。|193015|添加了html标记而不需要添加任何语义值。|193016|需要为每个实例提供内联定义和解决方案，而不是对css中单个“清除修复”的解决方案的类引用，以及在html中对其的类引用。|193017|使代码很难用于其他人，因为他们可能需要编写更多的黑客来解决这个问题。当您需要/希望使用另一个清除解决方案时，|193018|。您将不必返回并删除标记周围的每个<br+style="clear:+both"+/>标记。|193019|193020|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/snippets/css/a-guide-to-flexbox/|1|https://css-tricks.com/snippets/css/complete-guide-grid/|2|http://cssmojo.com/the-very-latest-clearfix-reloaded/|3|http://www.cssmojo.com/latest_new_clearfix_so_far/|4|http://www.cssmojo.com/latest_new_clearfix_so_far/#why-is-that|5|http://nicolasgallagher.com/micro-clearfix-hack/|6|http://www.quirksmode.org/css/clearing.html|7|http://www.satzansatz.de/cssd/onhavinglayout.html|8|http://wellstyled.com/css-underscore-hack.html|9|10|http://www.positioniseverything.net/easyclearing.html^0|0|0|0|0|B|0|0|0|8|1|0|0|0|0|0|1|F|0|N|E|0|0|0|Y|6|0|F|3|0|0|0|2M|E|35|E|K|X|2|0|0|0|0|0|0|0|0|0|0|0|0|11|4|16|8|0|8|3|0|0|0|8|H|4|0|0|0|M|Z|5|0|0|0|0|0|0|1Z|B|0|17|6|0|0|4|7|14|11|7|0|0|2|8|1T|4|P|F|8|25|9|9|0|0|0|0|0|0|U|1H|A|0|0|0|0|0|0|0|0|0|0|0|H|Q|0|0^^$0|@$1|2|3|4|5|6|7|4E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|4F|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|4G|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|4H|8|@]|9|@$H|4I|I|4J|1|4K]]|A|$]]|$1|J|3|K|5|G|7|4L|8|@]|9|@$H|4M|I|4N|1|4O]]|A|$]]|$1|L|3|-4|5|6|7|4P|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|4Q|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|4R|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|4S|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|4T|8|@$H|4U|I|4V|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|4W|8|@$H|4X|I|4Y|S|T]]|9|@]|A|$]]|$1|W|3|X|5|Y|7|4Z|8|@]|9|@]|A|$Z|10]]|$1|11|3|12|5|6|7|50|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|51|8|@$H|52|I|53|S|T]]|9|@]|A|$]]|$1|15|3|16|5|6|7|54|8|@$H|55|I|56|S|T]]|9|@]|A|$]]|$1|17|3|-4|5|6|7|57|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|58|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|59|8|@$H|5A|I|5B|S|T]|$H|5C|I|5D|S|T]]|9|@$H|5E|I|5F|1|5G]]|A|$]]|$1|1C|3|1D|5|Y|7|5H|8|@]|9|@]|A|$Z|10]]|$1|1E|3|1F|5|6|7|5I|8|@]|9|@]|A|$]]|$1|1G|3|-4|5|6|7|5J|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|5K|8|@]|9|@]|A|$]]|$1|1J|3|1I|5|6|7|5L|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|5M|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|6|7|5N|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|6|7|5O|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|6|7|5P|8|@]|9|@]|A|$]]|$1|1S|3|-4|5|6|7|5Q|8|@]|9|@]|A|$]]|$1|1T|3|1U|5|6|7|5R|8|@]|9|@]|A|$]]|$1|1V|3|1W|5|6|7|5S|8|@$H|5T|I|5U|S|T]|$H|5V|I|5W|S|T]]|9|@$H|5X|I|5Y|1|5Z]]|A|$]]|$1|1X|3|1Y|5|Y|7|60|8|@]|9|@]|A|$Z|10]]|$1|1Z|3|20|5|6|7|61|8|@]|9|@]|A|$]]|$1|21|3|22|5|6|7|62|8|@]|9|@$H|63|I|64|1|65]]|A|$]]|$1|23|3|-4|5|6|7|66|8|@]|9|@]|A|$]]|$1|24|3|25|5|6|7|67|8|@]|9|@]|A|$]]|$1|26|3|27|5|6|7|68|8|@]|9|@$H|69|I|6A|1|6B]]|A|$]]|$1|28|3|29|5|6|7|6C|8|@]|9|@]|A|$]]|$1|2A|3|2B|5|Y|7|6D|8|@]|9|@]|A|$Z|10]]|$1|2C|3|-4|5|6|7|6E|8|@]|9|@]|A|$]]|$1|2D|3|2E|5|6|7|6F|8|@]|9|@]|A|$]]|$1|2F|3|2G|5|6|7|6G|8|@]|9|@]|A|$]]|$1|2H|3|2I|5|6|7|6H|8|@$H|6I|I|6J|S|T]]|9|@$H|6K|I|6L|1|6M]]|A|$]]|$1|2J|3|2K|5|Y|7|6N|8|@]|9|@]|A|$Z|10]]|$1|2L|3|2M|5|6|7|6O|8|@$H|6P|I|6Q|S|T]]|9|@$H|6R|I|6S|1|6T]]|A|$]]|$1|2N|3|2O|5|Y|7|6U|8|@]|9|@]|A|$Z|10]]|$1|2P|3|2Q|5|6|7|6V|8|@$H|6W|I|6X|S|T]|$H|6Y|I|6Z|S|T]]|9|@$H|70|I|71|1|72]|$H|73|I|74|1|75]]|A|$]]|$1|2R|3|2S|5|Y|7|76|8|@]|9|@]|A|$Z|10]]|$1|2T|3|2U|5|6|7|77|8|@]|9|@]|A|$]]|$1|2V|3|-4|5|6|7|78|8|@]|9|@]|A|$]]|$1|2W|3|2X|5|6|7|79|8|@]|9|@]|A|$]]|$1|2Y|3|2Z|5|6|7|7A|8|@]|9|@]|A|$]]|$1|30|3|31|5|6|7|7B|8|@]|9|@$H|7C|I|7D|1|7E]]|A|$]]|$1|32|3|-4|5|6|7|7F|8|@]|9|@]|A|$]]|$1|33|3|34|5|6|7|7G|8|@]|9|@]|A|$]]|$1|35|3|36|5|6|7|7H|8|@]|9|@]|A|$]]|$1|37|3|38|5|Y|7|7I|8|@]|9|@]|A|$Z|10]]|$1|39|3|3A|5|6|7|7J|8|@]|9|@]|A|$]]|$1|3B|3|-4|5|6|7|7K|8|@]|9|@]|A|$]]|$1|3C|3|3D|5|G|7|7L|8|@]|9|@]|A|$]]|$1|3E|3|3F|5|G|7|7M|8|@]|9|@]|A|$]]|$1|3G|3|3H|5|G|7|7N|8|@]|9|@]|A|$]]|$1|3I|3|3J|5|G|7|7O|8|@]|9|@]|A|$]]|$1|3K|3|3L|5|G|7|7P|8|@$H|7Q|I|7R|S|T]]|9|@]|A|$]]|$1|3M|3|-4|5|6|7|7S|8|@]|9|@]|A|$]]|$1|3N|3|-4|5|6|7|7T|8|@]|9|@]|A|$]]]|3O|$3P|$5|3Q|3R|3S|A|$3T|3U]]|3V|$5|3Q|3R|3S|A|$3T|3W]]|3X|$5|3Q|3R|3S|A|$3T|3Y]]|3Z|$5|3Q|3R|3S|A|$3T|40]]|41|$5|3Q|3R|3S|A|$3T|42]]|43|$5|3Q|3R|3S|A|$3T|44]]|45|$5|3Q|3R|3S|A|$3T|46]]|47|$5|3Q|3R|3S|A|$3T|48]]|49|$5|3Q|3R|3S|A|$3T|4A]]|4B|$5|3Q|3R|3S|A|$3T|48]]|4C|$5|3Q|3R|3S|A|$3T|4D]]]]

<p>Depending upon the design being produced, each of the below clearfix CSS solutions has its own benefits.</p>

<p>The clearfix does have useful applications but it has also been used as a hack. Before you use a clearfix perhaps these modern css solutions can be useful:</p>

<ul>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">css flexbox</a></li>
<li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="noreferrer">css grid</a></li>
</ul>

<hr>

<h1>Modern Clearfix Solutions</h1>

<hr>

<h2>Container with <code>overflow: auto;</code></h2>

<p>The simplest way to clear floated elements is using the style <code>overflow: auto</code> on the containing element. This solution works in every modern browsers.</p>

<pre class="lang-html prettyprint-override"><code>&lt;div style="overflow: auto;"&gt;
  &lt;img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  &gt; 
  &lt;p&gt;Your content here…&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>One downside, using certain combinations of margin and padding on the external element can cause scrollbars to appear but this can be solved by placing the margin and padding on another parent containing element.</p>

<p>Using ‘overflow: hidden’ is also a clearfix solution, but will not have scrollbars, however using <code>hidden</code> will crop any content positioned outside of the containing element.</p>

<p><em>Note:</em> The floated element is an <code>img</code> tag in this example, but could be any html element.</p>

<hr>

<h2>Clearfix Reloaded</h2>

<p>Thierry Koblentz on CSSMojo wrote: <a href="http://cssmojo.com/the-very-latest-clearfix-reloaded/" rel="noreferrer">The very latest clearfix reloaded</a>. He noted that by dropping support for oldIE, the solution can be simplified to one css statement. Additionally, using <code>display: block</code> (instead of <code>display: table</code>) allows margins to collapse properly when elements with clearfix are siblings.</p>

<pre class="lang-css prettyprint-override"><code>.container::after {
  content: "";
  display: block;
  clear: both;
}
</code></pre>

<p>This is the most modern version of the clearfix.</p>

<hr>

<p>⋮</p>

<p>⋮</p>

<h1>Older Clearfix Solutions</h1>

<p>The below solutions are not necessary for modern browsers, but may be useful for targeting older browsers.</p>

<p>Note that these solutions rely upon browser bugs and therefore should be used only if none of the above solutions work for you.</p>

<p>They are listed roughly in chronological order.</p>

<hr>

<h2>"Beat That ClearFix", a clearfix for modern browsers</h2>

<p>Thierry Koblentz' of <a href="http://www.cssmojo.com/latest_new_clearfix_so_far/" rel="noreferrer">CSS Mojo</a> has pointed out that when targeting modern browsers, we can now drop the <code>zoom</code> and <code>::before</code> property/values and simply use:</p>

<pre class="lang-css prettyprint-override"><code>.container::after {
    content: "";
    display: table;
    clear: both;
}
</code></pre>

<p><em>This solution does not support for IE 6/7 …on purpose!</em></p>

<p>Thierry also offers: "<a href="http://www.cssmojo.com/latest_new_clearfix_so_far/#why-is-that" rel="noreferrer">A word of caution</a>: if you start a new project from scratch, go for it, but don’t swap this technique with the one you have now, because even though you do not support oldIE, your existing rules prevent collapsing margins."</p>

<hr>

<h2>Micro Clearfix</h2>

<p>The most recent and globally adopted clearfix solution, the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" rel="noreferrer">Micro Clearfix by Nicolas Gallagher</a>.</p>

<p><em>Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+</em></p>

<pre class="lang-css prettyprint-override"><code>.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}
</code></pre>

<hr>

<h2>Overflow Property</h2>

<p>This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.</p>

<p><a href="http://www.quirksmode.org/css/clearing.html" rel="noreferrer">http://www.quirksmode.org/css/clearing.html</a>
- <em>explains how to resolve common issues related to this technique, namely, setting <code>width: 100%</code> on the container.</em></p>

<pre class="lang-css prettyprint-override"><code>.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}
</code></pre>

<p>Rather than using the <code>display</code> property to set "hasLayout" for IE, other properties can be used for <a href="http://www.satzansatz.de/cssd/onhavinglayout.html" rel="noreferrer">triggering "hasLayout" for an element</a>.</p>

<pre class="lang-css prettyprint-override"><code>.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}
</code></pre>

<p>Another way to clear floats using the <code>overflow</code> property is to use the <a href="http://wellstyled.com/css-underscore-hack.html" rel="noreferrer">underscore hack</a>. IE will apply the values prefixed with the underscore, other browsers will not. The <code>zoom</code> property triggers <a href="http://www.satzansatz.de/cssd/onhavinglayout.html" rel="noreferrer">hasLayout</a> in IE:</p>

<pre class="lang-css prettyprint-override"><code>.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}
</code></pre>

<p>While this works... it is not ideal to use hacks.</p>

<hr>

<h2>PIE: Easy Clearing Method</h2>

<p>This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.</p>

<p>This solution is quite old, but you can learn all about Easy Clearing on Position Is Everything: <a href="http://www.positioniseverything.net/easyclearing.html" rel="noreferrer">http://www.positioniseverything.net/easyclearing.html</a></p>

<hr>

<h2>Element using "clear" property</h2>

<p>The quick and dirty solution (with some drawbacks) for when you’re quickly slapping something together:</p>

<pre><code>&lt;br style="clear: both" /&gt; &lt;!-- So dirty! --&gt;
</code></pre>

<h3>Drawbacks</h3>

<ul>
<li>It's not responsive and thus may not provide the desired effect if layout styles change based upon media queries. A solution in pure CSS is more ideal.</li>
<li>It adds html markup without necessarily adding any semantic value.</li>
<li>It requires a inline definition and solution for each instance rather than a class reference to a single solution of a “clearfix” in the css and class references to it in the html.</li>
<li>It makes code difficult to work with for others as they may have to write more hacks to work around it.</li>
<li>In the future when you need/want to use another clearfix solution, you won't have to go back and remove every <code>&lt;br style="clear: both" /&gt;</code> tag littered around the markup.</li>
</ul>


blocks|key|193531|text|我也会浮动#content，这样两列都包含浮点数。这也是因为它将允许您清除#content中的元素，而不需要清除侧栏。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|193532|与包装器相同的是，您需要将其设置为块格式上下文来包装这两列。|193533|本文提到了几个可以使用的触发器：block+formatting+contexts。|193534|entityMap|0|LINK|mutability|MUTABLE|url|http://www.tjkdesign.com/articles/block-formatting-contexts_and_hasLayout.asp^0|5|8|11|8|0|0|G|P|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

<p>I'd float <code>#content</code> too, that way both columns contain floats. Also because it will allow you to clear elements inside <code>#content</code> without clearing the side bar.</p>

<p>Same thing with the wrapper, you'd need to make it a block formatting context to wrap the two columns.</p>

<p>This article mentions a few triggers you can use:
<a href="http://www.tjkdesign.com/articles/block-formatting-contexts_and_hasLayout.asp" rel="nofollow noreferrer">block formatting contexts</a>.</p>


blocks|key|193543|text|老实说，所有解决方案似乎都是修复渲染错误的黑客.我错了吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193544|我发现<br+clear="all"+/>是最简单、最简单的。看到class="clearfix"无处不在并不能打动那些反对外来的市场因素的人的感情，对吗？你只是把问题画在不同的画布上。|offset|length|style|CODE|193545|我还使用了display:+hidden解决方案，它很棒，不需要额外的类声明或html标记.但有时您需要元素溢出容器，例如。漂亮的缎带和腰带|193546|entityMap^0|0|3|I|X|G|0|5|F|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]|$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|K|$]]

<p>honestly; all solutions seem to be a hack to fix a rendering bug ... am i wrong?</p>

<p>i've found <code>&lt;br clear="all" /&gt;</code> to be the easiest, simplest. seeing <code>class="clearfix"</code> everywhere can't stroke the sensibilities of someone who objects to extraneous markeup elements, can it? you're just painting the problem on a different canvas.</p>

<p>i also use the <code>display: hidden</code> solution, which is great and requires no extra class declarations or html markup ... but sometimes you need the elements to overflow the container, for eg. pretty ribbons and sashes</p>


blocks|key|316326|text|我建议使用以下内容，摘自http://html5boilerplate.com/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|316327|/*+>>+The+Magnificent+CLEARFIX+<<+*/|code-block|syntax|javascript|316328|.clearfix:after+{+
++content:+".";+
++display:+block;+
++height:+0;+
++clear:+both;+
++visibility:+hidden;+
}
.clearfix+{+
++display:+inline-block;++
}
*+html+.clearfix+{++
++height:+1%25;++
}+/*+Hides+from+IE-mac+\*/
.clearfix+{++
++display:+block;++
}|316329|entityMap|0|LINK|mutability|MUTABLE|url|http://html5boilerplate.com/^0|C|S|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|F|7|X|8|@]|9|@]|C|$G|H]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>I recommend using the following, which is taken from <a href="http://html5boilerplate.com/" rel="noreferrer">http://html5boilerplate.com/</a></p>

<pre><code>/* &gt;&gt; The Magnificent CLEARFIX &lt;&lt; */
</code></pre>

<pre class="lang-css prettyprint-override"><code>.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}
</code></pre>


blocks|key|193580|text|我只是用:-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193581|.clear:after{
++clear:+both;
++content:+"";
++display:+block;
}|code-block|syntax|javascript|193582|与IE8%2B兼容:)|193583|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I just use :-</p>

<pre><code>.clear:after{
  clear: both;
  content: "";
  display: block;
}
</code></pre>

<p>Works best and compatible with IE8+ :)</p>


blocks|key|193066|text|您也可以将其放在CSS中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193067|.cb:after{
++visibility:+hidden;
++display:+block;
++content:+".";
++clear:+both;
++height:+0;
}

*:first-child%2Bhtml+.cb{zoom:+1}+/*+for+IE7+*/|code-block|syntax|javascript|193068|并在您的父div中添加"cb“类：|193069|<div+id="container"+class="cb">|193070|您不需要在原始代码中添加任何其他内容.|193071|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You could also put this in your CSS:</p>

<pre><code>.cb:after{
  visibility: hidden;
  display: block;
  content: ".";
  clear: both;
  height: 0;
}

*:first-child+html .cb{zoom: 1} /* for IE7 */
</code></pre>

<p>And add class "cb" to your parent div:</p>

<pre><code>&lt;div id="container" class="cb"&gt;
</code></pre>

<p>You will not need to add anything else to your original code...</p>


blocks|key|316360|text|这是一个相当整洁的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316361|/*+For+modern+browsers+*/
.cf:before,
.cf:after+{
++++content:"";
++++display:table;
}

.cf:after+{
++++clear:both;
}

/*+For+IE+6/7+(trigger+hasLayout)+*/
.cf+{
++++zoom:1;
}|code-block|syntax|javascript|316362|316363|这是众所周知的工作在火狐3.5%2B，Safari+4%2B，Chrome，Opera9%2B，IE+6%2B|blockquote|316364|316365|包括:前选择器是不必要的清除浮标，但它防止顶部边缘崩溃在现代浏览器。这确保了在应用缩放:1时与IE6/7具有视觉一致性。|316366|316367|来自http://nicolasgallagher.com/micro-clearfix-hack/|offset|length|316368|entityMap|0|LINK|mutability|MUTABLE|url|http://nicolasgallagher.com/micro-clearfix-hack/^0|0|0|0|0|0|0|0|2|1C|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|15|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@$Q|18|R|19|1|1A]]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>This is quite a tidy solution: </p>

<pre class="lang-css prettyprint-override"><code>/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}
</code></pre>

<blockquote>
  <p>It's known to work in Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+</p>
  
  <p>Including the :before selector is not necessary to clear the floats,
  but it prevents top-margins from collapsing in modern browsers. This
  ensures that there is visual consistency with IE 6/7 when zoom:1 is
  applied.</p>
</blockquote>

<p>From <a href="http://nicolasgallagher.com/micro-clearfix-hack/" rel="noreferrer">http://nicolasgallagher.com/micro-clearfix-hack/</a></p>


blocks|key|316410|text|为什么只是试图使用css黑客来做1行HTML所做的工作。为什么不使用语义html的tu+put中断来返回行呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316411|对我来说，用它更好：|316412|<br+style="clear:both"+/>|code-block|syntax|javascript|316413|如果您不想在html中使用任何样式，则只需使用类作为中断，并将.clear+{+clear:both;+}放在CSS中即可。|offset|length|style|CODE|316414|这方面的优势：|316415|316416|语义使用html返回行|unordered-list-item|316417|如果没有CSS加载，它将工作|316418|不需要额外的CSS代码和哈克|316419|不需要用CSS模拟br，它已经存在于HTML|316420|<+code+>F+211中了。|316421|entityMap^0|0|0|0|V|M|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|17|8|@$K|18|L|19|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|T|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|T|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|T|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1G|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

<p>Why just trying to use css hack to do what 1 line of HTML do the job. And why not to use semantic html tu put break to return to the line?</p>

<p>Fo me is realy better to use : </p>

<pre><code>&lt;br style="clear:both" /&gt;
</code></pre>

<p>And if you don't want any style in your html you just have to use class for your break

and put <code>.clear { clear:both; }</code> in your CSS.</p>

<p>Advantage of this:</p>

<ul>
<li>Semantic use of html for return to the line</li>
<li>If no CSS load it will be working</li>
<li>No need extra CSS code and Hack</li>
<li>no need to simulate the br with CSS, it's already exist in HTML</li>
</ul>


blocks|key|193113|text|假设您使用的是这个HTML结构：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193114|<div+id="container">
++<div+id="content">
++</div>
++<div+id="sidebar">
++</div>
</div>|code-block|syntax|javascript|193115|下面是我要使用的CSS：|193116|div#container+{
++++overflow:+hidden;++++/*+makes+element+contain+floated+child+elements+*/
}

div#content,+div#sidebar+{
++++float:+left;
++++display:+inline;++++/*+preemptively+fixes+IE6+dobule-margin+bug+*/
}|193117|我一直使用这个集合，它对我来说很好，甚至在IE6中也是如此。|193118|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Assuming you're using this HTML structure:</p>

<pre><code>&lt;div id="container"&gt;
  &lt;div id="content"&gt;
  &lt;/div&gt;
  &lt;div id="sidebar"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here's the CSS that I would use:</p>

<pre class="lang-css prettyprint-override"><code>div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}
</code></pre>

<p>I use this set all the time and it works fine for me, even in IE6.</p>


blocks|key|193627|text|我总是浮动我的网格的主要部分，并将clear:+both;应用于页脚。这不需要额外的div或类。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|193628|entityMap^0|H|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>I always float the main sections of my grid and apply <code>clear: both;</code> to the footer. That doesn't require an extra div or class.</p>


blocks|key|193132|text|我已经尝试过所有这些解决方案，当我使用以下代码时，将自动向<html>元素添加很大的空白：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|193133|.clearfix:after+{+++
++++visibility:+hidden;+++
++++display:+block;+++
++++content:+".";+++
++++clear:+both;+++
++++height:+0;
}|code-block|syntax|javascript|193134|最后，通过将font-size:+0;添加到上面的CSS中，解决了边距问题。|193135|entityMap^0|T|6|0|0|6|D|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>I have tried all these solutions, a big margin will be added to <code>&lt;html&gt;</code> element automatically when I use the code below:</p>

<pre><code>.clearfix:after {   
    visibility: hidden;   
    display: block;   
    content: ".";   
    clear: both;   
    height: 0;
}
</code></pre>

<p>Finally, I solved the margin problem by adding <code>font-size: 0;</code> to the above CSS.</p>


blocks|key|316443|text|清除是元素在其自身之后自动清除的一种方式，因此不需要添加额外的标记。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316444|.clearfix:after+{
+++content:+"+";+/*+Older+browser+do+not+support+empty+content+*/
+++visibility:+hidden;
+++display:+block;
+++height:+0;
+++clear:+both;
}
.cleaner+{
++clear:+both;
}|code-block|syntax|javascript|316445|通常，您需要如下所做的事情：|316446|<div+style="float:+left;">Sidebar</div>
<div+class="cleaner"></div>+|316447|有了清空，你只需要|316448|<div+style="float:+left;"+class="clearfix">Sidebar</div>
|316449|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>A clearfix is a way for an element to automatically clear after itself, 
so that you don't need to add additional markup.</p>

<pre class="lang-css prettyprint-override"><code>.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.cleaner {
  clear: both;
}
</code></pre>

<p>Normally you would need to do something as follows:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div style="float: left;"&gt;Sidebar&lt;/div&gt;
&lt;div class="cleaner"&gt;&lt;/div&gt; &lt;!-- Clear the float --&gt;
</code></pre>

<p>With clearfix, you only need to</p>

<pre class="lang-html prettyprint-override"><code>&lt;div style="float: left;" class="clearfix"&gt;Sidebar&lt;/div&gt;
&lt;!-- No Clearing div! --&gt;
</code></pre>


blocks|key|193161|text|自举的Clearfix：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193162|.clearfix+{
++*zoom:+1;
}

.clearfix:before,
.clearfix:after+{
++display:+table;
++line-height:+0;
++content:+"";
}

.clearfix:after+{
++clear:+both;
}|code-block|syntax|javascript|193163|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Clearfix from bootstrap:</p>

<pre class="lang-css prettyprint-override"><code>.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}
</code></pre>


blocks|key|316453|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316454|#content{float:left;}
#sidebar{float:left;}
.clear{clear:both;+display:block;+height:0px;+width:0px;+overflow:hidden;}|code-block|syntax|javascript|316455|<div+id="container">
++<div+id="content">text+1+</div>
++<div+id="sidebar">text+2</div>
++<div+class="clear"></div>
</div>|316456|316457|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;div id="content"&gt;text 1 &lt;/div&gt;
  &lt;div id="sidebar"&gt;text 2&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|316459|text|.clearFix:after+{+
++++content:+"";
++++display:+table;++
++++clear:+both;++
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|316460|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre class="lang-css prettyprint-override"><code>.clearFix:after { 
    content: "";
    display: table;  
    clear: both;  
}
</code></pre>


blocks|key|193173|text|使用更少(http://lesscss.org/)，您可以创建一个方便的清除助手：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|193174|.clearfix()+{
++zoom:+1;
++&:before+{+
++++content:+'';+
++++display:+block;+
++}
++&:after+{+
++++content:+'';+
++++display:+table;+
++++clear:+both;+
++}
}|code-block|syntax|javascript|193175|然后将其用于有问题的容器，例如：|193176|
<div+id="container">
++<div+id="content"></div>
++<div+id="sidebar"></div>
</div>|193177|/*+LESS+*/
div#container+{
++.clearfix();
}|193178|entityMap|0|LINK|mutability|MUTABLE|url|http://lesscss.org/^0|5|J|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>With LESS (<a href="http://lesscss.org/" rel="noreferrer">http://lesscss.org/</a>), one can create a handy clearfix helper:</p>

<pre class="lang-css prettyprint-override"><code>.clearfix() {
  zoom: 1;
  &amp;:before { 
    content: ''; 
    display: block; 
  }
  &amp;:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}
</code></pre>

<p>And then use it with problematic containers, for example:</p>

<pre class="lang-html prettyprint-override"><code>&lt;!-- HTML --&gt;
&lt;div id="container"&gt;
  &lt;div id="content"&gt;&lt;/div&gt;
  &lt;div id="sidebar"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<pre class="lang-css prettyprint-override"><code>/* LESS */
div#container {
  .clearfix();
}
</code></pre>


blocks|key|193696|text|最新的标准，如Inuit.css和Bourbon+-两个非常广泛使用和维护良好的CSS/Sass框架：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|193697|.btcf:after+{
++++content:"";
++++display:block;
++++clear:both;
}|code-block|syntax|javascript|193698|193699|备注|193700|请记住，清除从本质上说是对现在much+easier+and+smarter+way中的柔性盒布局所能提供的东西的一种攻击。CSS浮动最初是为内联内容而设计的--就像长文本文章中的图像一样--而不是网格布局之类的。除非您是专门针对旧的(而不是边缘)+Internet，您的target+browsers+support+flexbox，所以值得花时间学习。|193701|这不支持IE7。你不应该支持IE7。这样做继续使用户暴露于非固定的安全漏洞，并使所有其他网页开发人员的生活更加艰难，因为它减轻了用户和组织使用更安全的现代浏览器的压力。|style|BOLD|193702|这一明确规定是2012年7月的announced+and+explained+by+Thierry+Koblentz。它减轻了Nicolas+Gallagher's+2011+micro-clearfix不必要的重量。在这个过程中，它释放了一个伪元素供您自己使用。这已经被更新为使用display:+block而不是display:+table+(同样，归功于Thierry+)。|CODE|193703|entityMap|0|LINK|mutability|MUTABLE|url|http://inuitcss.com/|1|http://bourbon.io/|2|https://philipwalton.github.io/solved-by-flexbox/|3|http://caniuse.com/#feat=flexbox|4|http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php|5|http://nicolasgallagher.com/micro-clearfix-hack/^0|7|9|0|H|7|1|0|0|0|0|F|R|2|3S|V|3|0|9|3|0|3X|E|4E|E|F|17|4|1R|13|5|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]|$A|1G|B|1H|1|1I]]|C|$]]|$1|D|3|E|5|F|7|1J|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1L|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1M|8|@]|9|@$A|1N|B|1O|1|1P]|$A|1Q|B|1R|1|1S]]|C|$]]|$1|N|3|O|5|6|7|1T|8|@$A|1U|B|1V|P|Q]]|9|@]|C|$]]|$1|R|3|S|5|6|7|1W|8|@$A|1X|B|1Y|P|T]|$A|1Z|B|20|P|T]]|9|@$A|21|B|22|1|23]|$A|24|B|25|1|26]]|C|$]]|$1|U|3|-4|5|6|7|27|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]|14|$5|X|Y|Z|C|$10|15]]|16|$5|X|Y|Z|C|$10|17]]|18|$5|X|Y|Z|C|$10|19]]|1A|$5|X|Y|Z|C|$10|1B]]]]

<p>The newest standard, as used by <a href="http://inuitcss.com/" rel="nofollow noreferrer">Inuit.css</a> and <a href="http://bourbon.io" rel="nofollow noreferrer">Bourbon</a> - two very widely used and well-maintained CSS/Sass frameworks:</p>
<pre class="lang-css prettyprint-override"><code>.btcf:after {
    content:&quot;&quot;;
    display:block;
    clear:both;
}
</code></pre>
<hr />
<h3>Notes</h3>
<p>Keep in mind that clearfixes are essentially a hack for what flexbox layouts can now provide in a <a href="https://philipwalton.github.io/solved-by-flexbox/" rel="nofollow noreferrer">much easier and smarter way</a>. CSS floats were originally designed for inline content to flow around - like images in a long textual article - and not for grid layouts and the like. Unless you're specifically targeting old (not Edge) Internet Explorer, your <a href="http://caniuse.com/#feat=flexbox" rel="nofollow noreferrer">target browsers support flexbox</a>, so it's worth the time to learn.</p>
<p>This doesn't support IE7. You <strong>shouldn't</strong> be supporting IE7. Doing so continues to expose users to unfixed security exploits and makes life harder for all other web developers, as it reduces the pressure on users and organisations to switch to safer modern browsers.</p>
<p>This clearfix was <a href="http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php" rel="nofollow noreferrer">announced and explained by Thierry Koblentz</a> in July 2012. It sheds unnecessary weight from <a href="http://nicolasgallagher.com/micro-clearfix-hack/" rel="nofollow noreferrer">Nicolas Gallagher's 2011 micro-clearfix</a>. In the process, it frees a pseudo-element for your own use. This has been updated to use <code>display: block</code> rather than <code>display: table</code> (again, credit to Thierry Koblentz).</p>


blocks|key|193717|text|我总是使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193718|.cf:before,
.cf:after+{
++++content:+"+";
++++display:+table;
}

.cf:after+{
++++clear:+both;
}

/**
+*+For+IE+6/7+only
+*/
.cf+{
++++*zoom:+1;
}|code-block|syntax|javascript|193719|在中，我甚至在块级元素上默认应用它。IMO，默认情况下将其应用于块级元素，使块级元素比它们的传统行为更直观。它还使我更容易将对旧浏览器的支持添加到级联框架(它支持IE6-8以及现代浏览器)。|193720|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I always use the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" rel="nofollow noreferrer"><strong>micro-clearfix</strong></a> :</p>

<pre><code>.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}
</code></pre>

<p>In <a href="http://jslegers.github.io/cascadeframework/" rel="nofollow noreferrer"><strong>Cascade Framework</strong></a> I even apply it by default on block level elements. IMO, applying it by default on block level elements gives block level elements more intuitive behavior than their traditonal behavior. It also made it a lot easier for me to add support for older browsers to Cascade Framework (which supports IE6-8 as well as modern browsers).</p>


blocks|key|193725|text|对于SASS来说，最明确的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193726|@mixin+clearfix+{
++++&:before,+&:after+{
++++++++content:+'';
++++++++display:+table;
++++}
++++&:after+{
++++++++clear:+both;
++++}
++++*zoom:+1;
}|code-block|syntax|javascript|193727|它的用途就像：|193728|.container {
++++@include+clearfix;
}|193729|如果您想要新的清除程序：|193730|@mixin+newclearfix+{
++++&:after+{
++++++++content:"";
++++++++display:table;
++++++++clear:both;
++++}
}|193731|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>With SASS, the clearfix is:</p>

<pre class="lang-css prettyprint-override"><code>@mixin clearfix {
    &amp;:before, &amp;:after {
        content: '';
        display: table;
    }
    &amp;:after {
        clear: both;
    }
    *zoom: 1;
}
</code></pre>

<p>and it's used like:</p>

<pre class="lang-css prettyprint-override"><code>.container {
    @include clearfix;
}
</code></pre>

<p>if you want the new clearfix:</p>

<pre class="lang-css prettyprint-override"><code>@mixin newclearfix {
    &amp;:after {
        content:"";
        display:table;
        clear:both;
    }
}
</code></pre>


blocks|key|316561|text|考虑到我不打算发这么多回复。然而，这种方法可以帮助某人，就像它确实帮助了我一样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316562|尽可能远离浮标|316563|值得一提的是，我避免像埃博拉这样的漂浮物。有很多原因，我并不孤单；阅读Rikudo关于what+is+a+clearfix的答案，你就会明白我的意思了。用他自己的话说：...the+use+of+floated+elements+for+layout+is+getting+more+and+more+discouraged+with+the+use+of+better+alternatives...|offset|length|style|CODE|316564|除了浮标外，还有其他好的(有时更好)的选择。随着技术的进步和进步，flexbox+(和其他方法)将被广泛采用，浮标将成为一种糟糕的记忆。也许是CSS4？|316565|316566|浮点错误行为和失败清除|316567|首先，有时，您可能会认为在您的救生器被刺穿和html流开始下沉之前，您是安全的。|316568|在下面的代码页http://codepen.io/omarjuvera/pen/jEXBya中，使用<div+classs="clear"></div>+(或其他元素)清除浮点数的做法很常见，但不赞成，而且是反语义的。|316569|<div+class="floated">1st</div>
<div+class="floated">2nd</div>
<div+class="floated">3nd</div>
<div+classs="clear"></div>+
<section>Below</section>|code-block|syntax|javascript|316570|CSS|BOLD|316571|div+{
++++border:+1px+solid+#f00;
++++width:+200px;
++++height:+100px;
}

div.floated+{
++++float:+left;
}

.clear+{
++++clear:+both;
}
section+{
++++border:+1px+solid+#f0f;
}|316572|，，就在你以为你的浮子是帆worthy...boom的时候！当屏幕大小变得越来越小时，您会看到奇怪的行为，如下面的图形(相同的http://codepen.io/omarjuvera/pen/jEXBya)：|316573|​|316574|📷|atomic|316575|316576|为什么你要关心呢？大概有80%25+(或更多)使用的是带有小屏幕的移动设备。台式计算机/膝上型计算机不再是王者。|316577|316578|它不会就此结束|316579|这并不是浮标唯一的问题。有很多，但在本例中，有些人可能会说是all+you+have+to+do+is+to+place+your+floats+in+a+container。但是，正如您在codepen和图形中所看到的，情况并非如此。这显然使事情变得更糟了：|316580|HTML|316581|<div+id="container"+class="">
++<div+class="floated">1st</div>
++<div+class="floated">2nd</div>
++<div+class="floated">3nd</div>
</div>+
<div+classs="clear"></div>+
<section>Below</section>|316582|316583|#container+{
++min-height:+100px;+/*+To+prevent+it+from+collapsing+*/
++border:+1px+solid+#0f0;
}
.floated+{
++++float:+left;
++++border:+1px+solid+#f00;
++++width:+200px;
++++height:+100px;
}

.clear+{
++++clear:+both;
}
section+{
++++border:+1px+solid+#f0f;
}|316584|结果如何？|316585|是*一样！|316586|316587|316588|至少你知道，你会开始一个CSS聚会，邀请各种各样的选择器和属性来参加聚会；把你的CSS弄得比你开始的还要混乱。只是为了修理你的浮子。|316589|316590|Clearfix拯救|316591|这个简单且适应性很强的CSS是美丽的，也是“救世主”：|316592|.clearfix:before,+.clearfix:after+{+
++++content:+"";
++++display:+table;
++++clear:+both;
++++zoom:+1;+/*+ie+6/7+*/
}|316593|就这样!它真的在没有破坏语义的情况下工作，我提到过it+works?吗？|316594|来自同一个sample...HTML|316595|<div+class="clearfix">
++++<div+class="floated">1st</div>
++++<div+class="floated">2nd</div>
++++<div+class="floated">3nd</div>
</div>
<section>Below</section>|316596|316597|div.floated+{
++++float:+left;
++++border:+1px+solid+#f00;
++++width:+200px;
++++height:+100px;
}
section+{
++++++++border:+4px+solid+#00f;
}


.clearfix:before,+.clearfix:after+{+
++++content:+"";
++++display:+table;
++++clear:+both;
++++zoom:+1;+/*+ie+6/7+*/
}|316598|316599|现在，我们不再需要<div+classs="clear"></div>+并保持语义警力。这不是唯一的好处。这种清除可以响应任何屏幕大小，而无需使用它最简单的形式的@media。换句话说，它将保持您的浮动容器在控制和防止洪水。最后，它在一个小空手道chop+=中提供了对旧浏览器的支持。|316600|这是又一次的清理|316601|.clearfix:before,+.clearfix:after+{+
++++content:+"";
++++display:+table;
++++clear:+both;
++++zoom:+1;+/*+ie+6/7+*/
}|316602|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/8554043/what-is-clearfix|1|https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes|2|http://codepen.io/omarjuvera/pen/jEXBya|3|4|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/939d0746cdb62c2882cc3589688222e9.png|imageAlt|5|http://codepen.io/omarjuvera/pen/XJoMYG|6|https://developer.qcloudimg.com/http-save/yehe-900000/f5d9ca16642c6c9974e4abba4c11796d.png|7|http://codepen.io/omarjuvera/pen/wBRJaz^0|0|0|2C|39|17|I|0|0|X|7|1|0|0|0|0|1E|Q|7|13|2|0|0|0|3|0|0|0|1|1R|13|3|0|0|0|1|4|0|0|0|9|0|0|0|U|1L|2N|7|5|0|0|0|0|0|0|0|0|1|6|0|0|0|0|0|0|0|P|9|7|0|E|4|0|0|0|3|0|0|0|9|1E|2W|6|0|0|0^^$0|@$1|2|3|4|5|6|7|38|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|39|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|3A|8|@$F|3B|G|3C|H|I]]|9|@$F|3D|G|3E|1|3F]]|A|$]]|$1|J|3|K|5|6|7|3G|8|@]|9|@$F|3H|G|3I|1|3J]]|A|$]]|$1|L|3|-4|5|6|7|3K|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|3L|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|3M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|3N|8|@$F|3O|G|3P|H|I]]|9|@$F|3Q|G|3R|1|3S]]|A|$]]|$1|S|3|T|5|U|7|3T|8|@]|9|@]|A|$V|W]]|$1|X|3|Y|5|6|7|3U|8|@$F|3V|G|3W|H|Z]]|9|@]|A|$]]|$1|10|3|11|5|U|7|3X|8|@]|9|@]|A|$V|W]]|$1|12|3|13|5|6|7|3Y|8|@$F|3Z|G|40|H|Z]]|9|@$F|41|G|42|1|43]]|A|$]]|$1|14|3|15|5|6|7|44|8|@]|9|@]|A|$]]|$1|16|3|17|5|18|7|45|8|@]|9|@$F|46|G|47|1|48]]|A|$]]|$1|19|3|15|5|6|7|49|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|4A|8|@$F|4B|G|4C|H|Z]]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|4D|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|6|7|4E|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|4F|8|@$F|4G|G|4H|H|I]]|9|@$F|4I|G|4J|1|4K]]|A|$]]|$1|1H|3|1I|5|6|7|4L|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|U|7|4M|8|@]|9|@]|A|$V|W]]|$1|1L|3|Y|5|6|7|4N|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|U|7|4O|8|@]|9|@]|A|$V|W]]|$1|1O|3|1P|5|6|7|4P|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|6|7|4Q|8|@]|9|@]|A|$]]|$1|1S|3|17|5|18|7|4R|8|@]|9|@$F|4S|G|4T|1|4U]]|A|$]]|$1|1T|3|15|5|6|7|4V|8|@]|9|@]|A|$]]|$1|1U|3|1V|5|6|7|4W|8|@]|9|@]|A|$]]|$1|1W|3|-4|5|6|7|4X|8|@]|9|@]|A|$]]|$1|1X|3|1Y|5|6|7|4Y|8|@]|9|@]|A|$]]|$1|1Z|3|20|5|6|7|4Z|8|@]|9|@]|A|$]]|$1|21|3|22|5|U|7|50|8|@]|9|@]|A|$V|W]]|$1|23|3|24|5|6|7|51|8|@]|9|@$F|52|G|53|1|54]]|A|$]]|$1|25|3|26|5|6|7|55|8|@$F|56|G|57|H|Z]]|9|@]|A|$]]|$1|27|3|28|5|U|7|58|8|@]|9|@]|A|$V|W]]|$1|29|3|Y|5|6|7|59|8|@$F|5A|G|5B|H|Z]]|9|@]|A|$]]|$1|2A|3|2B|5|U|7|5C|8|@]|9|@]|A|$V|W]]|$1|2C|3|-4|5|6|7|5D|8|@]|9|@]|A|$]]|$1|2D|3|2E|5|6|7|5E|8|@$F|5F|G|5G|H|I]|$F|5H|G|5I|H|I]]|9|@]|A|$]]|$1|2F|3|2G|5|6|7|5J|8|@]|9|@]|A|$]]|$1|2H|3|2I|5|U|7|5K|8|@]|9|@]|A|$V|W]]|$1|2J|3|-4|5|6|7|5L|8|@]|9|@]|A|$]]]|2K|$2L|$5|2M|2N|2O|A|$2P|2Q]]|2R|$5|2M|2N|2O|A|$2P|2S]]|2T|$5|2M|2N|2O|A|$2P|2U]]|2V|$5|2M|2N|2O|A|$2P|2U]]|2W|$5|2X|2N|2Y|A|$2Z|30|31|-4]]|32|$5|2M|2N|2O|A|$2P|33]]|34|$5|2X|2N|2Y|A|$2Z|35|31|-4]]|36|$5|2M|2N|2O|A|$2P|37]]]]

<p>Given the huge amount of replies I was not gonna post. However, this method may help someone, as it did help me.</p>
<h2>Stay way from floats whenever possible</h2>
<p>It's worth to mention, I avoid floats like Ebola. There are many reasons and I am not alone; Read Rikudo answer about <a href="https://stackoverflow.com/questions/8554043/what-is-clearfix">what is a clearfix</a> and you'll see what I mean. In his own words: <code>...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...</code></p>
<p>There are other good (and sometimes better) options out there other than floats. As technology advances and improves, <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" rel="nofollow noreferrer">flexbox</a> (and other methods) are going to be widely adopted and floats will become just a bad memory. Maybe a CSS4?</p>
<hr />
<h2>Float misbehavior and failed clears</h2>
<p>First off, sometimes, you may think that you are safe from floats until your lifesaver is punctured and your html flow starts to sink:</p>
<p>In the codepen <a href="http://codepen.io/omarjuvera/pen/jEXBya" rel="nofollow noreferrer">http://codepen.io/omarjuvera/pen/jEXBya</a> below, the practice of clearing a float with <code>&lt;div classs=&quot;clear&quot;&gt;&lt;/div&gt;</code> (or other element) is common but frown upon and anti-semantic.</p>
<pre><code>&lt;div class=&quot;floated&quot;&gt;1st&lt;/div&gt;
&lt;div class=&quot;floated&quot;&gt;2nd&lt;/div&gt;
&lt;div class=&quot;floated&quot;&gt;3nd&lt;/div&gt;
&lt;div classs=&quot;clear&quot;&gt;&lt;/div&gt; &lt;!-- Acts as a wall --&gt;
&lt;section&gt;Below&lt;/section&gt;
</code></pre>
<p><strong>CSS</strong></p>
<pre><code>div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}
</code></pre>
<p><strong>However</strong>, just when you thought your float is sail worthy...boom! As the screen size becomes smaller and smaller you see weird behaviors in like the graphic below (Same <a href="http://codepen.io/omarjuvera/pen/jEXBya" rel="nofollow noreferrer">http://codepen.io/omarjuvera/pen/jEXBya</a>):</p>
<p><img src="https://i.stack.imgur.com/BHCiv.png" alt="float bug sample 1" /></p>
<p><strong>Why should you care?</strong>
Roughly, about 80% (or more) of the devices used are mobile devices with small screens. Desktop computers/laptops are no longer king.</p>
<hr />
<h2>It does not end there</h2>
<p>This is not the only problem with floats. There are many, but in this example, some may say <code>all you have to do is to place your floats in a container</code>. But as you can see in the <a href="http://codepen.io/omarjuvera/pen/XJoMYG" rel="nofollow noreferrer">codepen</a> and graphic, that is not the case. It apparently made things worst:</p>
<p>HTML</p>
<pre><code>&lt;div id=&quot;container&quot; class=&quot;&quot;&gt;
  &lt;div class=&quot;floated&quot;&gt;1st&lt;/div&gt;
  &lt;div class=&quot;floated&quot;&gt;2nd&lt;/div&gt;
  &lt;div class=&quot;floated&quot;&gt;3nd&lt;/div&gt;
&lt;/div&gt; &lt;!-- /#conteiner --&gt;
&lt;div classs=&quot;clear&quot;&gt;&lt;/div&gt; &lt;!-- Acts as a wall --&gt;
&lt;section&gt;Below&lt;/section&gt;
</code></pre>
<p>CSS</p>
<pre><code>#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}
</code></pre>
<p>As for the result?</p>
<p>It's the *** same!
<img src="https://i.stack.imgur.com/SDY1J.png" alt="float bug sample 2" /></p>
<p>Least you know, you'll start a CSS party, inviting all kinds of selectors and properties to the party; making a bigger mess of your CSS than what you started with. Just to fix your float.</p>
<hr />
<h2>CSS Clearfix to the rescue</h2>
<p>This simple and very adaptable piece of CSS is a beauty and a &quot;savior&quot;:</p>
<pre><code>.clearfix:before, .clearfix:after { 
    content: &quot;&quot;;
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}
</code></pre>
<p>That's it! It really works without breaking semantics and did I mention <a href="http://codepen.io/omarjuvera/pen/wBRJaz" rel="nofollow noreferrer">it works?</a>:</p>
<p>From the same sample...<strong>HTML</strong></p>
<pre><code>&lt;div class=&quot;clearfix&quot;&gt;
    &lt;div class=&quot;floated&quot;&gt;1st&lt;/div&gt;
    &lt;div class=&quot;floated&quot;&gt;2nd&lt;/div&gt;
    &lt;div class=&quot;floated&quot;&gt;3nd&lt;/div&gt;
&lt;/div&gt;
&lt;section&gt;Below&lt;/section&gt;
</code></pre>
<p><strong>CSS</strong></p>
<pre><code>div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: &quot;&quot;;
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}
</code></pre>
<hr />
<p>Now we no longer need <code>&lt;div classs=&quot;clear&quot;&gt;&lt;/div&gt; &lt;!-- Acts as a wall --&gt;</code> and keep the semantic police happy. This is not the only benefit. This clearfix is responsive to any screen size without the use of <code>@media</code> in it's simplest form. In other words, it will keep your float container in check and preventing floodings. Lastly, it provides support for old browsers all in one small karate chop =)</p>
<h1>Here's the clearfix again</h1>
<pre><code>.clearfix:before, .clearfix:after { 
    content: &quot;&quot;;
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}
</code></pre>


blocks|key|193272|text|与其他清除程序不同的是，这里有一个没有容器的开放端清除程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193273|其他清除要求浮动元素位于标记良好的容器中，或者需要额外的、语义上为空的<div>。相反，内容和标记的明确分离需要--一个严格的CSS解决方案--来解决这个问题。|offset|length|style|CODE|BOLD|193274|仅仅是需要标记浮点数的结束这一事实就不允许使用。|193275|如果后者是您的目标，那么浮点数应该保留为任何东西(段落、有序列表和无序列表等)。包围它，直到遇到“清除”。例如，清除可能由一个新的标题设置。|193276|这就是为什么我在新标题中使用以下清除方法的原因：|193277|h1+{
++++clear:+both;
++++display:+inline-block;
++++width:+100%25;
}|code-block|syntax|javascript|193278|该解决方案在my+website上得到了广泛的应用，以解决这个问题:浮动微型的旁边的文本很短，下一个清除对象的上限不受尊重。|193279|它还防止在从站点自动生成PDFs时进行任何手动干预。这是一个example+page。|193280|entityMap|0|LINK|mutability|MUTABLE|url|http://hamwaves.com/capacitors/en/index.html|1|http://hamwaves.com/capacitors/en/capacitors.letter.pdf|2^0|0|Z|5|1K|G|0|0|0|0|0|6|A|0|0|C|4|1|U|C|2|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@$D|1A|E|1B|F|G]|$D|1C|E|1D|F|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|1E|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1F|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1G|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1H|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|1I|8|@]|9|@$D|1J|E|1K|1|1L]]|A|$]]|$1|V|3|W|5|6|7|1M|8|@]|9|@$D|1N|E|1O|1|1P]|$D|1Q|E|1R|1|1S]]|A|$]]|$1|X|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]|15|$5|10|11|12|A|$13|16]]|17|$5|10|11|12|A|$13|14]]]]

<h1>Unlike other clearfixes, here is an open-ended one without containers</h1>
<p>Other clearfixes either require the floated element to be in a well marked off container or need an extra, semantically empty <code>&lt;div&gt;</code>. Conversely, clear separation of content and markup requires <strong>a strict CSS solution</strong> to this problem.</p>
<p>The mere fact that one needs to mark off the end of a float, does not allow for <a href="https://tex.stackexchange.com/a/340365/26348"><strong>unattended CSS typesetting</strong></a>.</p>
<p>If the latter is your goal, the float should be left open for anything (paragraphs, ordered and unordered lists etc.) to wrap around it, until a &quot;clearfix&quot; is encountered. For example, the clearfix might be set by a new heading.</p>
<p>This is why I use the following clearfix with new headings:</p>
<pre class="lang-css prettyprint-override"><code>h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}
</code></pre>
<p>This solution gets used extensively on <a href="http://hamwaves.com/capacitors/en/index.html" rel="nofollow noreferrer">my website</a> to solve the problem: The text next to a floated miniature is short and the top-margin of the next clearing object is not respected.</p>
<p>It also prevents any manual intervention when automatically generating <a href="http://hamwaves.com/capacitors/en/capacitors.letter.pdf" rel="nofollow noreferrer">PDFs</a> from the site.
Here is an <a href="http://hamwaves.com/capacitors/en/index.html" rel="nofollow noreferrer">example page</a>.</p>


blocks|key|193282|text|我最喜欢的方法是在我的css+/+scss文档中创建一个清除类，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193283|.clearfix{
++++clear:both;
}|code-block|syntax|javascript|193284|然后在我的html文档中调用它，如下所示|193285|<html>
++<div+class="div-number-one">
++++Some+Content+before+the+clearfix
++</div>

++
++<div+class="clearfix"></div>

++<div+class="div-number-two">
++++Some+more+content+after+the+clearfix
++</div>
</html>|193286|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>My Favourite Method is to create a clearfix class in my css / scss document as below</p>
<pre><code>.clearfix{
    clear:both;
}
</code></pre>
<p>And then call it in my html document as shown below</p>
<pre><code>&lt;html&gt;
  &lt;div class=&quot;div-number-one&quot;&gt;
    Some Content before the clearfix
  &lt;/div&gt;

  &lt;!-- Let's say we need to clearfix Here between these two divs ---&gt;
  &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;

  &lt;div class=&quot;div-number-two&quot;&gt;
    Some more content after the clearfix
  &lt;/div&gt;
&lt;/html&gt;
</code></pre>


blocks|key|193310|text|作业在一行中似乎有一个新的显示值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193311|display:+flow-root;|code-block|syntax|javascript|193312|在W3规范中：“元素生成一个块容器框，并使用流布局来布局其内容。它总是为其内容建立一个新的块格式上下文。”|193313|信息：https://www.w3.org/TR/css-display-3/#valdef-display-flow-root+https://www.chromestatus.com/feature/5769454877147136|offset|length|193314|如上面的链接所示，支持目前是有限的，所以下面这样的回退支持可能会有用：https://github.com/fliptheweb/postcss-flow-root|193315|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/css-display-3/#valdef-display-flow-root|1|https://www.chromestatus.com/feature/5769454877147136|2|https://github.com/fliptheweb/postcss-flow-root^0|0|0|0|3|1P|0|1T|1H|1|0|Z|1B|2|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@]|9|@$K|14|L|15|1|16]|$K|17|L|18|1|19]]|A|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@$K|1B|L|1C|1|1D]]|A|$]]|$1|O|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]|Y|$5|R|S|T|A|$U|Z]]]]

<p>A new display value seems to the job in one line.</p>

<pre><code>display: flow-root;
</code></pre>

<p>From the W3 spec: "The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents."</p>

<p>Information:
<a href="https://www.w3.org/TR/css-display-3/#valdef-display-flow-root" rel="nofollow noreferrer">https://www.w3.org/TR/css-display-3/#valdef-display-flow-root</a>
<a href="https://www.chromestatus.com/feature/5769454877147136" rel="nofollow noreferrer">https://www.chromestatus.com/feature/5769454877147136</a></p>

<p>※As shown in the link above, support is currently limited so fallback support like below may be of use:
<a href="https://github.com/fliptheweb/postcss-flow-root" rel="nofollow noreferrer">https://github.com/fliptheweb/postcss-flow-root</a></p>


blocks|key|193331|text|非常简单，clearfix通过在div+element.If中使用float属性来清除问题，我们使用两个div元素，一个作为float:左侧，另一个作为float:right；我们可以为两个div元素的父元素使用clearfix。如果我们拒绝使用清除，不必要的空间，填补以下内容和网站结构将被打破。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193332|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>It is so simple clearfix clears the issue by when we using the float properties inside the div element.If we use two div elements one as float:left; and other one as float:right; we can use clearfix for the parent of the two div element. If we refuse to use clearfix unnecessary spaces fill with contents below and site structure will be broken. </p>


<p>I have the age-old problem of a <code>div</code> wrapping a two-column layout. My sidebar is floated, so my container <code>div</code> fails to wrap the content and sidebar.</p>

<pre class="lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;div id="content"&gt;&lt;/div&gt;
  &lt;div id="sidebar"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>There seem to be numerous methods of fixing the clear bug in Firefox:</p>

<ul>
<li><code>&lt;br clear="all"/&gt;</code></li>
<li><code>overflow:auto</code></li>
<li><code>overflow:hidden</code></li>
</ul>

<p>In my situation, the only one that seems to work correctly is the <code>&lt;br clear="all"/&gt;</code> solution, which is a little bit scruffy. <code>overflow:auto</code> gives me nasty scrollbars, and <code>overflow:hidden</code> must surely have side effects.
Also, IE7 apparently shouldn't suffer from this problem due to its incorrect behaviour, but in my situation it's suffering the same as Firefox.</p>

<p>Which method currently available to us is the most robust?</p>


What methods of ‘clearfix’ can I use?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个由来已久的div包装两列布局的问题。我的侧栏是浮动的，所以我的容器div无法包装内容和侧边栏。<div id="container">  <div id="content"></div>  <div id="sidebar"></div></div>在Firefox中，似乎有许多修复明确错误的方法：<br cl...

问我可以用什么方法“清除”？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以用什么方法“清除”？EN