Html 如果孩子们浮动，为什么我的父类必须浮动

我的应用程序有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;}

正如您所看到的，这已经将子对象移动到了正确的位置，但是父对象不再为它们设置框架

为了解决这个问题，我必须在父类（包装器）中添加一个左浮动，但这意味着父类现在是浮动的，这肯定意味着如果它有一个父类，那么它也必须左浮动，因为它将一直向上浮动到body标记

---

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

您需要清除浮动。只需添加第三个div即可完成此操作。

---

你需要清除浮子。只需添加第三个div即可完成此操作。

.clear{clear:both；}
这是b
这是c

.clear{clear:both；}
这是b
这是c

将

类clearfix

添加到主包装

div

中，并在

css

中添加以下代码

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

---

将一个

类clearfix

添加到主包装

div

中，并在

css

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

---

您还可以在父元素上添加一个溢出：隐藏，以便它环绕两个子元素

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

.a {overflow:hidden;}

这是b
这是c
.a{溢出：隐藏；}

您还可以在父元素上添加一个overflow:hidden，以便它环绕两个子元素

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

.a {overflow:hidden;}

这是b
这是c
.a{溢出：隐藏；}

签出此答案关于clearfix方法的另一个资源可能重复的签出此答案关于clearfix方法的另一个资源可能重复的请不要复制其他人的答案。@blunderboy-我没有复制。这并不是规则，先生，世界上每个人都应该有不同的代码。很抱歉，我没有抄那张。我已经用过很多次了。当我以前使用java脚本显示数据时，我主要使用它。@user3145373:在我还是新手的时候，我也经常使用它……下次键入fast！！：）这里的问题是你的原始帖子（你在前5分钟内编辑过，因此没有任何记录）没有显示.clear{clear:tweet}，正如Anthony所做的那样，我担心你的帖子会被认为是你复制的。我认为，从技术上讲，你确实是先写代码的（或者是在同一时间写的），但是，由于你原来的帖子格式不正确（没有显示所有代码），看起来好像这是一个副本（虽然不是）@user3145373我没有否决你的答案。你说两个人可以写相同的代码是完全正确的。但你删除了先前的答案，并发布了与瓦瑟的答案相似的新答案。请不要抄袭他人的答案。@blunderboy-我没有抄袭。这并不是规则，先生，世界上每个人都应该有不同的代码。很抱歉，我没有抄那张。我已经用过很多次了。当我以前使用java脚本显示数据时，我主要使用它。@user3145373:在我还是新手的时候，我也经常使用它……下次键入fast！！：）这里的问题是你的原始帖子（你在前5分钟内编辑过，因此没有任何记录）没有显示.clear{clear:tweet}，正如Anthony所做的那样，我担心你的帖子会被认为是你复制的。我认为，从技术上讲，你确实是先写代码的（或者是在同一时间写的），但是，由于你原来的帖子格式不正确（没有显示所有代码），看起来好像这是一个副本（虽然不是）@user3145373我没有否决你的答案。你说两个人可以写相同的代码是完全正确的。但是你删除了先前的答案，并发布了与Waser的答案类似的新答案，而这可能是一个好答案（投票结果表明这是一个好答案：））这不是一种黑客行为吗？这是一种旧的方法，已经被更可靠的clearfix方法@DaveRook所取代：它不是黑客行为……这是

float

软件包附带的一种方式……因为float会混淆容器的高度……检查此线程以澄清您的理解=>@DaveRook:同时，你可能想接受答案！！：）@NoobEditor，事实上，它没有。我的问题是为什么，而不是如何修复它（尽管我确实给出了+1，因为答案是好的）。我刚刚投票结束了这个重复的问题，因为你引用的帖子回答了这个问题。虽然这可能是一个好答案（投票结果表明这是一个好答案：））这不是一种黑客行为吗？这是一种旧的方法，已经被更可靠的clearfix方法@DaveRook所取代：它不是黑客行为……这是

float

软件包附带的一种方式……因为float会混淆容器的高度……检查此线程以澄清您的理解=>@DaveRook:同时，你可能想接受答案！！：）@NoobEditor，事实上，它没有。我的问题是为什么，而不是如何修复它（尽管我确实给出了+1，因为答案是好的）。我刚刚投票决定结束这个重复的问题，因为你引用的帖子回答了这个问题。问题被标记为

css

，而不是

css3

…所以我想应该考虑旧的浏览器支持！！：）抱歉，向IcCube CSS3@ NOOBEDITORUD提供了一个很好的观察者@ NooBoistor谢谢，我会考虑标签在这个时候回答：“问题是标签<代码> CSS < /代码>，而不是<代码> CSS3…所以我想老浏览器支持是要考虑的！！）很抱歉，我向你说：“谢谢你，我在回答这个问题的时候也会考虑标签。”

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

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

.a {overflow:hidden;}