1

这是一个关于浮动的非常基本的问题，但我无法通过搜索引擎找到答案。

当我有两个块级元素（例如 div）并且我需要它们彼此相邻时，为什么给它们中的第一个元素 float:left -property 是不够的？为什么我需要浮动两个 div 以将第二个放在第一个旁边而不是在它下面？

这是一个代码示例：

HTML

<div id="box_wrap">
    <div id="box1">
        <h2>Box1 text</h2>
        <p>Lorem Ipsum</p>
    </div>
    <div id="box2">
        <h2>Box2 text</h2>
        <p>Lorem Ipsum</p>
        <p>Text</p>
    </div>

</div>

CSS

#box1 {
    background-color: blue;
    width: 30%;
    float: left;
}

#box2 {
    background-color: red;
    width: 30%;
    float: left;
}
4

1 回答 1

1

浮点数从正常的文档流中移除，并且浮动在 的内容的左侧#box2，而不是 div 本身。本质上没有足够的空间。如果您给出#box260% 的宽度，您可以看到这一点。

您可以通过为第二个框提供自己的块格式上下文来更改此行为。这样做的一个属性是设置overflow: hidden

#box2 {
    background-color: red;
    width: 30%;
    overflow: hidden;
}

演示在http://jsfiddle.net/7tmmk/2/

有关为元素提供自己的块格式上下文的其他方式，请参见：https ://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context

有关此内容和其他内容的更多信息overflow: hidden，请查看http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

于 2013-04-14T12:54:06.980 回答