试图理解<div>元素

Question

<style>

div#float {
    text-align: center;
    float: left;
    width: 150px;
    height: 150px;
    border: 1px solid blue;
    background: gold;
}
div.content {
    background: yellow;
    border: 1px solid  purple;
    height: 150px;
}

</style>

            <div id='float'>
                Float text. 
            </div>
            <div class='content'>
                Content text. 
            </div>
            <div class='content'>
                Content text. 
            </div>

任何人都可以解释第二个div内容是如何在换行符上的？而第一个div与div#float内联？

Answer 1

默认情况下,div将占用块的整个宽度.你的第一个只是在浮动的div之后开始,因为它就是它可以开始的地方.由于您的内容div都是块级元素,因此它们将占用它们可用的整个宽度.

有很多方法可以控制这个,但我不确定你在追求什么.