2

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

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

然后在css中

.clear{ clear:both; width 100% }

在大多数情况下，这让我作为一名开发人员经历了多年，直到今天。

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

我的问题很简单：是否有任何理由为什么需要在清晰的 div 上设置宽度？

4

2 回答 2

3

在不需要额外 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

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

于 2013-01-25T13:39:17.540 回答
0

我总是使用clear: both或只使用左/右以避免 IE 上的额外空格（示例）。

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

于 2013-01-25T13:22:04.203 回答