html - 为什么我的父类必须 float 如果 child 漂浮

Question

我的应用程序有 1 个父框和 2 个子框 (divs)。此时，子框出现在彼此下方

<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 都添加了一个 float left

.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/

如您所见，这已将子级移动到正确的位置，但父级不再将它们框起来。

要修复它，我必须向父类(包装器)类添加一个 float left 但这意味着父类现在是 float 的，这肯定意味着如果它有一个父类，那么它也必须向左浮动，因为它会一路向上直到 body 标签？

我的问题是，为什么外部 div (a) 在未 float 时会以这种方式运行？我是否可以假设因为 children 在漂浮，所以 children 被视为不存在，这就是为什么外部 div 的边框没有封装他们？

Answer 1

您需要清除 float 。只需添加第三个 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; }