Question

这是关于花车的一个非常基本的问题，但我找不到搜索引擎的答案。

当我有两个块级元素（例如div）并且我需要它们彼此相邻时，为什么不能给它们中的第一个浮点数：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;
}

Answer 1

浮动从正常文档流中移除，并且浮动在#box2的内容的左侧，但不是div本身。实质上没有足够的空间。如果您为#box2提供60％的宽度，则可以看到此内容。

您可以通过为第二个框提供自己的块格式化上下文来更改此行为。执行此操作的一个属性是设置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

两个块级元素;为什么我需要漂浮两者并排放置它们？

HTML

CSS

1 个答案: