css清除：宽度和宽度均为100%？

我不完全确定这是从哪里来的，但根据习惯，如果我在一些浮动元素之后有一个清晰的div，我会执行以下操作

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

在很大程度上，我已经作为一名开发人员度过了很多年，直到今天

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

---

我的问题很简单：有什么理由要求在一个清晰的div上有一个宽度吗？

我总是使用

clear:all

或left/right来避免IE上的额外空格（）

---

因此，如果总是对我有用的话，那么在所有浏览器中，

width:100%

没有一般原因，有一种更好的方法可以清除浮动后的元素，而不需要额外的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>

您可以在这里阅读更多关于这些语义方法的信息：和这里

---

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

为什么使用空标记进行样式设置？HTML5样板上也采用了一种干净的方法（最初称为easyclearing），这种方法在任何地方都能完美地工作。也许你可以在这把小提琴上扩展一下。抱歉，刚刚意识到第二个链接已断开。这是：这是一把小提琴，演示了：after方法。在重读之后，我认为如果没有包含div，您将无法使用此方法。但是，与溢出方法相比，此方法提供了一些好处，例如溢出属性添加了不需要的滚动条或隐藏了需要的内容。fiddle link：我非常喜欢在容器div中使用

：after

，如果您可以将其添加到您的答案中，那么我会将其标记为正确。当然，只需在css中弹出：after方法

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

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