为什么左浮动的块元素不能漂浮到他兄弟块元素的左边

Question

如果在剩余浮动样式的块元素之前存在内联元素。块元素将水平浮动到内联元素的左侧。

如果在剩余浮动样式的块元素之前存在块元素。浮动块元素将垂直位于第一个块元素后面。

为什么浮动块元素不能水平浮动到第一个块元素的左侧？ css规范中是否有任何规则要求浏览器遵循此行为？谢谢！

抱歉我的英语不好。

Answer 1

块级元素和内联元素对它们周围的浮动元素的反应不同。内联元素环绕浮动元素，例如在Word中的图像周围的文本。

块级元素占用空间，因此块级元素之后的浮动元素将在前一个元素完成的点处开始浮动。

在元素周围使用边框有助于查看正在发生的事情： http://jsfiddle.net/B9FVg/

<强> HTML

<span>I am inline!</span>
<div class="floating">I'm floating left</div>

<div>I am block!</div>
<div class="floating">I'm floating left</div>

<强> CSS

div{
    padding:20px;
    border:1px solid #000;
}

.floating{
    float:left;
}