CSS清除或溢出的最佳实践

与同事讨论CSS清除/溢出的最佳实践。请让我们中的一个闭嘴，解释为什么一个比另一个好

JOEL的代码（使用溢出）：

.container{溢出：隐藏；}
.1、.2{浮点：左；宽度：50px；高度：50px；背景色：红色；}

CHRIS的代码（使用clear）：

.clear{clear:两者；}
.1、.2{浮点：左；宽度：50px；高度：50px；背景色：红色；}

两者都使这幅图像：

谁是对的？：）

如果你处在一个你总是知道接下来的元素会是什么的情况下，你可以应用清楚的：两者都有；重视这一要素，开展业务。这是理想的，因为它不需要花哨的技巧，也不需要额外的元素，因此具有完美的语义。当然，事情通常不是这样的，我们需要在工具箱中有更多的浮点清除工具

这里有一个折衷方案：

CSS:

HTML:

---

我会这样写的。CHRIS的代码是我不会写的，但它只是造成多余的空div的原因。

因为这两种情况下的CSS在复杂性和可维护性方面大致相同，所以使用更简单（因此更小）的HTML和总体负载的解决方案是成功的。这并没有什么大的区别，通过压缩，重复的代码可能会消失，但如果其他条件都相同，那么越简单越小越好。

那压缩呢？没有添加标记，没有

溢出：隐藏剪辑，对IE 6+的跨浏览器支持。
我个人偏好的是
溢出：隐藏
技术。我认为这是因为浮动是一种风格决定。在我看来，在标记中放置一个类
clear
，就像在数据层中添加样式信息一样。它与添加内联css类似（但远没有那么糟糕）。（事实上，如果您仔细考虑一下，您还可以将
style=“clear:tware”
添加到您希望添加的div中
class=“clear”
）

这当然是我个人的看法。我不认为一个比另一个好。但是我很少遇到溢出问题：隐藏溢出：当你有一个比里面的内容小的容器时，隐藏是最好的选择；然而清楚：当您希望浮动容器不与最近的容器并排放置时，最好使用这两种方法

看看您的redsqures示例，您可能希望使用clear而不是overflow，但不像这里那样。也许更像：

.container { width:110px; clear:both; }
.one, .two { float: left; width: 50px; height: 50px; margin-right:10px; background-color: red; }

基本上你是对的和错的。Joel使用了更好的html方法，但是Chris使用了正确的CSS代码，只是方式不对。
这两项工作可能重复，但后者需要在html中添加一个额外的元素。因为html用于内容，css用于表示，所以我不需要额外的元素来完成布局。如果您无法更改html，该怎么办？从长远来看，前者将是最可取的方法。PS我还添加了一个
zoom:1
，以使其在IE6中工作，但也许我应该开始放手了。不过，没有任何东西可以清除最后一个容器的浮动子容器。这到底是怎么回答这个问题的呢？亲爱的朋友@Bolt，如果没有什么需要澄清的，那就是你错过了
.1、.2{float:left
属性。这回答了两个都是对的问题，但我会这样写。现在他们可以将我的答案添加到问题中！；）我会在我的答案中添加解释。我想你误读了我的评论-我是说最后两个浮动的子元素没有被清除。@BoltClock是说如果你在最后一个容器，它不显示在容器下面，而是在容器旁边。真的，伙计们。我错过了
显示：表；
的
.container
。谢谢！（快速手指-浏览大脑）
<style>
  .clear { clear: both; }
  .one, .two { float: left; width: 50px; height: 50px; background-color: red; }
</style>

<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>

  .container { display:table; }
  .one, .two { float: left; width: 50px; height: 50px; background-color: red; margin:1px;}

<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>

.container { width:110px; clear:both; }
.one, .two { float: left; width: 50px; height: 50px; margin-right:10px; background-color: red; }