html - CSS 仅在父 div 内清除

Question

这是我正在尝试做的示例代码

<div>
  <div style="float:left; width:220px; height:300px; border: 1px solid #aaa">
  Left div <br>float:left <br> fixed width 220px
  </div>

 <div>
    Right div. <br>No styles<br> Takes remaning width <br><br>
    There are some small blocks (one - four) with "float:left"


  <div class="small">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
  </div>

  <div>
   <div id='bottom_div1'>Some content which needs to appear below small blocks</div>
   <div id='bottom_div2'>Some content at the bottom, which needs to appear below small blocks</div>
  </div>

 </div>

</div>

工作 fiddle here

我需要 div bottom_div1 和 bottom_div2 中的内容出现在小块(“一”-“四”)行下方的右侧 div 中。 但是，对于“clear:both”，它出现在左侧 div 下方，而对于“clear:none”，它出现在小块的右侧。任何帮助将不胜感激!

Answer 1

只需将overflow: hidden添加到小div的容器即可。

为什么有效？

overflow: hidden(以及可见以外的值)创建一个“block formatting context”，因此所有 float 的 div 现在都包含在里面并且 float 不再影响流。

.small div {float:left; padding:10px; border: 1px solid #aaa}
.small {overflow: hidden}

<div>
    <div style="float:left; width:220px; height:300px; border: 1px solid #aaa">
        Left div <br>float:left <br> fixed width 220px
    </div>

    <div>
        <div>Right div. <br>No styles<br> Takes remaning width <br><br> There are some small blocks (one - four) with "float:left"</div>
    </div>

    <div class="small">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>

    <div id='inner-footer'>
        <div id='bottom_div1'>Some content at the bottom, which needs to appear below small blocks</div>
        <div id='bottom_div2'>Some content at the bottom, which needs to appear below small blocks</div>
    </div>
</div>