CSS 如何在标记中不使用 <div class="clear">
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6681768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to not use <div class="clear"> in markup
提问by Tom
All the time my code is riddled with <div>'s that are used to clear/expand a div to look correct. Whenever it doesn't look correct, I add a <div style="clear:both;">and it fixes the problem in IE7.
一直以来，我的代码都充斥着<div>用于清除/扩展 div 以使其看起来正确的 's。每当它看起来不正确时，我添加一个<div style="clear:both;">并修复 IE7 中的问题。
How do I avoid doing this? I mess with the overflow:auto, overflow:hiddenand I get nothing.
我如何避免这样做？我弄乱了overflow:auto，overflow:hidden我什么也没得到。
Thanks in advance
提前致谢
回答by Nicole
One common method is the clearfixclass. Instead of needing extraneous <div style="clear:both;">elements (as you have been doing) after the floating element, you simply add this class to the floating element itselfand the layout is automatically cleared after it.1
一种常见的方法是clearfix类。不需要<div style="clear:both;">在浮动元素之后添加无关元素（正如您一直在做的那样），您只需将此类添加到浮动元素本身，然后布局就会自动清除。1
My favorite one is from http://perishablepress.com/press/2009/12/06/new-clearfix-hack. It supports modern browsers as well as IE6 and IE7.
我最喜欢的一个来自http://perishablepress.com/press/2009/12/06/new-clearfix-hack。它支持现代浏览器以及 IE6 和 IE7。
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Example (old/bad):
示例（旧/坏）：
<div class="floatingrightmenu">This floats right</div>
<div style="clear:both;"></div>
<p>This text is cleared below it.</p>
Example (new with clearfix):
示例（新的clearfix）：
<div class="floatingrightmenu clearfix">This floats right</div>
<p>This text is cleared below it.</p>
1:Note: the automatic clearing means that it works best with single floated elements. If you wish to have multiple elements floated next to each other, put them all into a single container which is also floated and apply clearfixto that container.
1：注意：自动清除意味着它对单个浮动元素效果最好。如果您希望多个元素彼此相邻浮动，请将它们全部放入一个容器中，clearfix该容器也浮动并应用于该容器。
回答by Treemonkey
if you pop overflow:hidden; on the container of the floating elements that should work! dunno how cross browser it is however.
如果你弹出溢出：隐藏；在应该工作的浮动元素的容器上！不知道它是如何跨浏览器的。
回答by John Slegers
In Cascade FrameworkI apply the micro-clearfix by default on block level elements. This allows you to avoid the use of stuff like <div style="clear:both;">or <div class="clearfix">with but very minimal side-effects. And if you really want traditional behavior for block level elements, absolute positioning should do the trick. Check out Cascade Frameworkfor yourself to get an idea of how practical it really is.
在Cascade Framework 中，我默认在块级元素上应用 micro-clearfix。这使您可以避免使用类似<div style="clear:both;">或<div class="clearfix">具有非常小的副作用的东西。如果你真的想要块级元素的传统行为，绝对定位应该可以解决问题。亲自查看Cascade Framework以了解它的实用性。
