Question

我有一个问题，关于一个简单的情况，你在div容器中有2个浮动元素，并且你想要适当调整容器的高度。

我知道有多种方法可以实现这一点，即使用清除div，清除：在伪元素之后，设置溢出：隐藏，或者（如下例所示）浮动容器div。

＆＃13;

.container {
  float: left;
}
.container img {
  float: left;
}
.container p {
  float: right;
}

＆＃13;

<div class="container">
  <img src="somePic.jpg" />
  <p>Some text</p>
</div>

＆＃13;

我知道容器div（如果没有浮动）不会调整高度，因为它的子（浮动）不是正常流量的一部分。有人可以解释为什么浮动容器修复了这个问题吗？

Answer 1

将您的容器display属性设置为block或inline-block并overflow:visible制作。请参阅以下示例代码：

＆＃13;

.container {
  display: inline-block;
  overflow: visible;
  float: left;
  padding: 16px;
  background-color: #00ff00;
}
.container img {
  float: left;
}
.container p {
  float: right;
}

＆＃13;

<div class="container">
  <img src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/cute-kittens.jpg" />
  <p>Some text</p>
</div>

＆＃13;

Answer 2

@Alexander已经为您提供了解决问题的可能方案，但如果我理解正确，您想知道“为什么”浮动容器可以解决问题。

我四处寻找并没有找到一个有效的答案，无论如何我发现reasons因为各种缺点而避免使用这种方法。

一般来说，我们可以说浮动一个元素从普通文档流中提取它，这就是它的容器自然崩溃到0高度的原因。也可以浮动它，从文档流中提取最后一个，创建一个可以包含浮动子项的不同上下文。

浮动容器的高度

2 个答案: