CSS清除:both and width 100%?

Question

我不完全确定我从哪里得到这个，但作为习惯规则，如果我在一些 float 元素之后有一个清晰的 div，我会执行以下操作。

<div class='clear'></div>

然后在CSS中

.clear{ clear:both; width 100% }

在很大程度上，这见证了我作为一名开发人员多年的经历，直到今天。

今天我发现 100% 宽度位破坏了 IE7 中的布局，删除宽度修复了它。

我的问题很简单:透明 div 上需要宽度有什么原因吗？

Answer 1

有一种更好的方法来清除 float 元素，不需要额外的 HTML 元素。通常，您希望使 HTML 尽可能直观和语义化，并将所有设计和视觉辅助留给 CSS。

如果我有以下 HTML:

<div class="container">
    <div class="floated-left"></div>
    <div class="floated-right">
</div></div>
<div class="some-non-floating-content"></div>

CSS:

overflow approach:
.container {
    overflow: auto;
    width: 100%;
}
:after approach:
.container:after {
    content: '';
    display: block;
    height: 0;
    clear: both; 
}

您可以在此处阅读有关这些更具语义的方法的更多信息:http://css-tricks.com/all-about-floats/在这里 http://www.positioniseverything.net/easyclearing.htmls

为了回答您有关宽度的具体问题，我只知道在应用溢出以确保容器不会折叠时需要它。