CSS清除或溢出的最佳实践

Question

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

JOEL'代码（使用溢出）：

<style>
  .container { overflow: hidden; }
  .one, .two { float: left; width: 50px; height: 50px; background-color: red; }
</style>

<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>

CHRIS'代码（使用明确）：

<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>

两者都制作了这张图片：

谁是对的？ ：）

Answer 1

  

如果您处在一个总是知道后续元素将会是什么的情况下，您可以应用clear：both;对该元素的价值并开展您的业务。 这是理想的，因为它不需要任何花哨的黑客，也没有额外的元素使其完全语义化。当然，事情通常不会那样，我们需要有更多的浮动清除工具。工具箱。

http://css-tricks.com/all-about-floats/

Answer 2

溢出：当你的容器小于里面的内容时，最好使用hidden;而clear：当您希望浮动容器不将其自身放置在最近的容器旁边时，最好使用两者。

查看你的红色方块示例，你会想要使用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代码。

Answer 3

这是妥协：

<强> DEMO jsBin

CSS：

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

HTML：

<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>

我这样写。 CHRIS的代码是我不会写的东西，而只是冗余空DIV的原因。

Answer 4

由于两种情况下的CSS在复杂性和可维护性方面大致相同，因此具有更简单（因此更小）的HTML和整体有效负载的解决方案获胜。这不是一个很大的区别，并且通过压缩，重复的代码可能会消失，但如果其他条件相同则更简单，更小也总是更好。

Answer 5

micro clearfix怎么样？没有添加标记，没有overflow: hidden;剪辑，跨浏览器支持IE 6 +。

Answer 6

我个人的偏好是overflow:hidden技术。我认为这是因为浮动某事是一种风格决定。在标记中放置一个clear类似乎就像在数据层中添加样式信息一样。它与添加内联css类似（但远没有那么差）。 （事实上​​，如果您考虑一下，您也可以将style="clear:both"添加到要添加class="clear"的div中。

这当然是我的个人意见。我并不认为一个比另一个好。但我很少遇到overflow:hidden的问题。