Reverse-engineering 是什么导致浮动 children 中断

Question

没关系 award-winning 标题。

在一个非常大的项目中，一团糟，在结构非常糟糕的 HTML 环境的深处，有几个容器，我在其中使用了经典的浮动 div 情况：

HTML

<div class="floatSet clearfix">
    <div>
       <img src="/thumbnail.jpg" />
    </div>
    <div>
       I am a label
    </div>
</div>

CSS

.floatSet > div {
    float: left;
}

通常，作为块元素，我的 .floatSet 会拉伸到 100%。里面的两个花车会整齐地并排漂浮。第二个 div（标签），但是，一旦文本太多，就会在第一个 div（缩略图） 下方 下方中断 甚至 当有足够的 space 来显示它旁边的整个内容时，只需将文本分成多行即可。

我不知道为什么。我查了 white-space: nowrap 和家人，但没找到任何人。我还尝试查看 Chrome 开发人员工具中的 CSS 继承树，这样我就能理解为什么容器会这样。

所以问题就变成了：什么样的样式（或称之为设置）会导致我的容器中的浮动不再像在外面那样表现？

有些事情告诉我解决方案非常简单..

Answer 1

设置 max/min 宽度，并确保您的内容适合它。完成后，您可以使用 floatset 将 div 向左浮动。另外，将 overflow 设置为隐藏，看看会发生什么。

Answer 2

将 float 与 none 以外的值一起使用会建立一个新的 block formatting context，其中框的外部 left/right 边距不会触及 left/right 它包含块的边缘不再存在浮点数。

因此，盒子——本身是浮动的——向下移动，直到它适合或不再有浮动。参见：http://www.w3.org/TR/CSS21/visuren.html#floats

解决此问题的可能方法是：

将特定宽度设置为第二个 div 并将其浮动到一边。
避免浮动第二个 div 并给它一个左边距——作为第一个 div 的宽度的宽度。
在第二个 div 之前建立 new block formatting context 只需给它一个 hidden 的 overflow（除 visible 之外的任何值）。这样盒子的边缘就不会与浮子重叠。

.floatSet > div:first-of-type {
    float: left;
}

.floatSet > div:nth-of-type(2) {
    background-color: gold;
    overflow: hidden;
}

.clearfix {
    overflow: hidden;
}

<div class="floatSet clearfix">
    <div>
        <img src="http://placehold.it/100" />
    </div>
    <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius maxime corporis fuga odit saepe nesciunt facere consectetur voluptates ipsa ducimus? Quidem expedita doloribus blanditiis maiores voluptatem tenetur placeat fugiat beatae.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nisi suscipit quaerat qui veniam quos inventore laudantium necessitatibus saepe odit odio aspernatur veritatis porro magnam enim ad expedita rerum ex.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et recusandae quos pariatur quod molestias omnis nulla. Cumque eos facere doloremque culpa praesentium ad illum laborum velit ducimus dicta vero asperiores!
    </div>
</div>

Reverse-engineering 是什么导致浮动 children 中断

Reverse-engineering what is causing floating children to break

html

css

css-float