css-float - 为什么左浮动块元素不能浮动到他之前的兄弟块元素的左侧

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