如果子项浮动，为什么我的父类必须浮动

Question

我的应用程序有1个父框和2个子框（div）。目前，子框出现在彼此之下

<div class="a">
    <div class="b">This is b</div>
    <div class="c">This is c</div>      
</div>

.a{border:solid;width:300px;}    
.b{border:solid;width:100px;color:red;}    
.c{border:solid;width:100px;color:green;}

http://jsfiddle.net/5EpYL/

现在，我希望我的2个盒子（b和c）彼此相邻。我向b和c添加一个浮动

.a{border:solid;width:300px;}
.b{border:solid;width:100px;color:red;float:left;}
.c{border:solid;width:100px;color:green;float:left;}

http://jsfiddle.net/5EpYL/1/

正如你所看到的，这已经将孩子们带到了正确的地方，但是父母不再将他们构筑了。

要修复它，我必须向父（包装器）类添加一个浮点数，但这意味着父类如果现在浮动，这肯定意味着如果它有一个父类，那也必须向左浮动，如它会一直向上直到身体标签？

我的问题是，为什么外部div（a）在没有浮动时会以这种方式运行？我可以假设，因为孩子们是漂浮的，那么孩子们就会被视为不在那里，这就是外部div的边界没有封装它们的原因吗？

Answer 1

您需要清除浮动。只需添加第三个div就可以了 http://jsfiddle.net/5EpYL/2/

<div class="a">
    <div class="b">This is b</div>
    <div class="c">This is c</div>    
    <div class="clear"></div>
</div>

.clear { clear: both; }

Answer 2

在主要包装class clearfix中添加div，并在css

中添加以下代码

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Answer 3

.clear { clear: both; }

<div class="a">
    <div class="b">This is b</div>
    <div class="c">This is c</div>    
    <div class="clear"></div>
</div>

Answer 4

您还可以在父元素上添加 overflow：hidden ，以便它包裹两个子元素。

    <div class="a">
        <div class="b">This is b</div>
        <div class="c">This is c</div>      
    </div>

.a {overflow:hidden;}