Html CSS仅在父div内清除

下面是我尝试做的示例代码

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

左div
浮动：左
固定宽度220px
右分区。
无样式
采用剩余宽度


有一些带有“float:left”的小块（1-4）
一
二
三
四
一些需要显示在小块下面的内容
底部的一些内容，需要显示在小块下面

工作小提琴

我需要divs bottom_div1和bottom_div2中的内容出现在右div的小块行下方（“一”-“四”）。

---

但是，如果使用“clear:both”，则显示在左div下方，如果使用“clear:none”，则显示在小块的右侧。任何帮助都将不胜感激

为规则

尝试
显示：内联块
。小div
，例如：

.small div {display: inline-block; padding:10px; border: 1px solid #aaa}

并删除
bottom\u div1
和
bottom\u div2
的
clear
样式。似乎工作正常。
只需将
溢出：隐藏
添加到小div的容器中即可

它为什么有效？

overflow:hidden
（和非可见的值）创建一个“”，因此所有浮动div现在都包含在其中，浮动不再影响流。
.small div{float:left；padding:10px；border:1px solid#aaa}
.small{溢出：隐藏}

左div
浮动：左
固定宽度220px
右分区。
没有样式
采用剩余宽度

有一些带有“float:left”的小区块（1-4）
一
二
三
四
底部的一些内容，需要显示在小块下面
底部的一些内容，需要显示在小块下面
你几乎就要拿到了。你只需要重新安排一下你的角色和风格。将下面的代码段与原始设置进行比较，找出差异：


.left div{
浮动：左；
宽度：220px；
高度：300px；
边框：1px实心#aaa；
}
.右分区{
浮动：左；
宽度：300px；
}
.小分区{
浮动：左；
填充：10px；
边框：1px实心#aaa；
}
#底部第1部分，
#底部2{
清除：左；
}

左分区

浮动：左

固定宽度220px
右分区

只有浮动：左侧和宽度：300px的样式

采用剩余宽度


有一些带有“float:left”的小块（1-4）
一
二
三
四
底部的一些内容，需要显示在小块下面
底部的一些内容，需要显示在小块下面
有输入错误，抱歉！必须删除class=small的div上方的结账。然而，这并不影响任何事情。这里的新把戏：这是可行的，但实际数据将大相径庭。小区块的数量和每个区块的大小将有所不同（以及用户屏幕的宽度）。亲爱的安德鲁·斯克利亚夫斯基先生和斯特拉先生，我们没有确切的利润空间。两种解决方案都很好。你能解释一下（或贴一个链接阅读）哪种方式更好（更多的跨浏览器和更少的易受这些div中数据变化的影响）@PhantomLord是的，先生：-）非常感谢“为什么它有效”！！！！否则它看起来像是黑魔法：）不。使用“float”属性，整个右div将移动到左div的下方。这就是为什么它没有属性使其占据右侧的剩余宽度。这取决于右div的宽度；-）我在上面代码段的右侧div中添加了一个显式宽度为
300px
，因此您可以理解我的意思。一般来说，一个好的经验法则是，每当你浮动一个元素时，你都应该明确地指定它的宽度。如果你想让右div占据水平空间的其余部分，你可以将它的宽度声明为：
width:calc（100%-220px）