CSS：为什么块元素环绕浮动元素 [英] CSS: Why block element wrap around floating element

问题描述

请参阅 http://jsfiddle.net/w1xhpp2c/ 上的示例。我不明白为什么div.b包裹在浮动元素。我总是认为只有内联元素可以包装浮动元素，而块元素不会。

  .wrap {
 width：500px; 
} 
 .a {
 float：left; 
 width：200px; 
 
} 
 .b {
 background-color：#eee; 
 width：500px; 
} 
 
 
 
< div class =a> 
 a< br /> 
 a< br /> 
< / div> 
 
< div class =b> 
 b< br /> 
 b< br /> 
 b< br /> 
< / div> 
< / div> 
  

解决方案

CSS 2.1规范

由于浮动不在流中，非定位块框在浮动框之前和之后垂直创建
，好像浮点没有
存在

See example at http://jsfiddle.net/w1xhpp2c/. I don't understand why div.b is wrapped around the float element. I always thought that only inline element could wrap float elements, while block elements will not.

.wrap{
        width: 500px;
    }
    .a{
        float: left;
        width: 200px;

    }
    .b{
        background-color:#eee;
        width:500px;
    }

<div class="wrap">

        <div class="a">
            a<br/>
            a<br/>
        </div>

        <div class="b">
             b<br/>
             b<br/>
             b<br/>
        </div>
</div>

解决方案

Block boxes flow under floating elements. CSS 2.1 spec says

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist

这篇关于CSS：为什么块元素环绕浮动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！