Question

我不完全确定我从哪里得到这个但是作为习惯的规则如果我在一些浮动的元素之后有一个明确的div我做以下。

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

然后在css

.clear{ clear:both; width 100% }

在大多数情况下，这使我多年来一直是开发人员，直到今天。

今天我发现100％宽度的位在IE7中打破了布局，删除了固定它的宽度。

我的问题很简单：为什么明确的div需要宽度？

Answer 1

有一种更好的方法可以清除不需要额外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

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

Answer 2

我总是使用clear: both或仅使用左/右来避免IE上的额外空格（example）。

所以，如果一直对我有用，在所有浏览器中，AFAIK都没有width: 100%的一般原因。

css clear：both和width 100％？

2 个答案: