Question

在此fiddle中，父标记包含<img>标记，该标记向左浮动float: left，但父标记未完全展开包含浮动的img元素，尽管我在父clear:both标记上设置了。

我知道在div上关闭clear:both或之前添加额外的overflow:auto 将会完成这项工作，但我最终会在为clear:both设置代码的原因无效。

有人可以解释这种行为吗？

.thumbnail-desc h2 {
  display: inline-block;
  background: blue;
  color: #fff;
  padding: 5px 7px;
  margin-bottom: 0;
}
.thumbnail-desc img {
  float: left;
  width: 200px;
  max-height: 200px;
  margin-left: initial;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  overflow: hidden;
}
.thumbnail-desc p {
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.01);
  padding: 15px;
  font-size: 18px;
  clear: both;
  margin-bottom: 20px;
  margin-top: 0;
}

<div class="thumbnail-desc">
  <h2>Some title</h2>
  <p>
    <img src="http://i.huffpost.com/gen/1632280/images/n-VISION-200x150.jpg" alt="Our Vision">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi nihil dignissimos. Some crazy text.Some crazy text</p>
</div>

Answer 1

您似乎可能会误解clear的工作原理。

在clear:both标记上设置告诉p清除其前面的任何内容 - 而不是其中的子项。

Answer 2

您可以为overflow: hidden;添加。以下是示例：https://jsfiddle.net/hnL0gLy2/

Answer 3

不要使用p标记覆盖图片，而是使用class和div。

Fiddle

HTML：

<div class="thumbnail-desc">
<h2>Some title</h2>
<div class="outer">
<img src="http://i.huffpost.com/gen/1632280/images/n-VISION-200x150.jpg" alt="Our Vision">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi nihil dignissimos. Some crazy text.Some crazy text
</div>
</div>

CSS：

.thumbnail-desc h2 {  display: inline-block;
            background: blue;
            color: #fff;
            padding: 5px 7px;
            margin-bottom: 0; }

.thumbnail-desc img {
     float: left;
    width: 200px;
    max-height: 200px;
    margin-left: initial;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    overflow: hidden; }
.thumbnail-desc .outer {
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.01);
    padding: 15px;
    font-size: 18px;
    height:150px;
    }

为什么您的代码无法正常工作？

因为p标记用于文本。它的高度与div内的文本一样多。要获得更高的高度，您需要切换为div或span。

Answer 4

您需要将.thumbnail-desc p设置为display的{{1}}。

CSS浮动：在父级上清除不扩展它以包含浮动子级

4 个答案: