Question

我有一个漂浮孩子的div。

我知道我可以通过以下两种方式拉伸高度：

＆＃13;

.container {
  border: 2px solid #ccc;
  margin-bottom: 250px;
}

.container-2::after {
  content: '';
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
}

.container-3 {
  overflow: hidden;
}

.item {
  float: left;
  width: 200px;
  height: 50px;
  background: red;
  margin: 10px;
}

＆＃13;

<div class="container container-1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container container-2">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container container-3">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

但我认为它们有不同的原则：clear:both :: after 元素远离浮动兄弟，并强制父div拉伸高度; overflow:hidden样式使div具有 BFC ，并且根据standard，BFC将扩展其高度以包含其浮动子项。

优点和缺点并不重要，但它们的工作方式如何。

我是对的，他们是不同的，但结果相同？

做清楚：两个＆＃34;和＆＃34;溢出：隐藏＆＃34;以同样的方式让一个容器包裹漂浮的孩子？

0 个答案: