CSS清除两个内部的子对象

我在这个问题上遇到麻烦已经很久了。我相信这是浮动布局的一个非常常见的问题，我希望有人能给出一个“标准”的解决方案

作为标题，问题在于嵌套浮动。考虑下面的简单布局：

<div class='parent clearfix'>
     <div id='child1' style='float:left; width:500px'>
         { ... child 1 content goes here ... }
     </div>
     <div id='child2' style='margin-left:501px;'>
         { ... child 2 content goes here ... }
     </div>
</div>

{…子1内容在此处…}
{…孩子2的内容在这里…}

这里clearfix是自动清除浮动子项的常用技术。问题是，如果child2包含另一个clearfix元素，则布局将被破坏。例如，如果子2内容为：

<div class='inside clearfix'>
    <div class='sub1' style='float-left; width:100px'> 
        { ... extra content goes here ... } 
    </div>
    <div class='sub2' style='margin-left:101px'> 
        { ... extra content goes here ... } 
    </div>
</div>

{…这里有额外的内容…}
{…这里有额外的内容…}

因此，通常，如果我们在浮动布局内（在非浮动元素内）使用clear:tware，它也会清除父容器

如果使用绝对位置和一点js，我知道怎么做，但这不是一个好的做法

如何使用float修复它

---

谢谢

在使用float时，我采用了一种更简单的方法，即使用带有clear类的额外div。这更容易理解，更不容易出错

以下是我的工作：

<div class="parentClass">
    <div class="float1">
    . . .  
    </div>
    <div class="float2">
    . . .
    </div>
    <div class="clear"></div>
</div>

---

你可以试试这种方法，我相信事情会好起来的。祝你好运

也可以使用overflow:hidden

<div class="wrapper">
  <div class="float"></div>
  <div class="float"></div>
</div>

.wrapper{
 overflow: hidden;
}

.float{float: left;}

.包装纸{
溢出：隐藏；
}
.float{float:left；}

---

检查演示

此方法没有给出完整的100%宽度（添加float1和float2），您需要使用JS。此外，如果必须在float2元素中再次使用float和clear：这两个选项，则会破坏布局。这就是我想问的问题。溢出：隐藏是CSS中最神秘的东西！我想这很清楚：两者都是多余的。

<div class="wrapper">
  <div class="float"></div>
  <div class="float"></div>
</div>

.wrapper{
 overflow: hidden;
}

.float{float: left;}