Question

没关系获奖的头衔。

在一个非常大的项目中，一个字面上的混乱，深陷在结构非常糟糕的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（缩略图），甚至之后。当有足够的空间来显示旁边的整个事物时，只需将文本分成多行即可。

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

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

有些东西告诉我解决方案很简单......

Answer 1

设置最大/最小宽度，并确保您的内容适合它。完成后，您可以使用floatset将div放到左侧。另外，将overflow设置为隐藏，然后查看其功能。

Answer 2

使用float以外的值none会建立一个新的block formatting context，其中框的外左/右边距不会触及它的左/右边缘在有浮子的情况下包含块。

因此，盒子 - 自身浮动 - 向下移动，直到它适合或没有更多的浮子存在。请参阅：http://www.w3.org/TR/CSS21/visuren.html#floats

克服这个问题的可能方法是：

将特定宽度设置为第二个div并将其浮动到一侧。
避免浮动第二个div并给出左边距 - 作为第一个div宽度的宽度 - 给它。
只需向overflow hidden visible提供.floatSet > div:first-of-type { float: left; } .floatSet > div:nth-of-type(2) { background-color: gold; overflow: hidden; } .clearfix { overflow: hidden; }，就可以通过第二个div创建new block formatting context。这样盒子的边缘就不会与浮子重叠。

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

lnk

反向工程导致漂浮儿童休息的原因

2 个答案: