为什么要将盒子从父盒中取出？

Question

有时，浮动框出父框，我必须添加“宽度：100％;溢出：隐藏”给父母来阻止这个。

那么，为什么浮箱可以超出父母？这是标准行为吗？

<div style=" border:1px solid #F00">
  <div style="float:left">float</div>
</div>

Answer 1

这是一个陷阱，我认为每个人都陷入了困境，可能不止一次。

以下是了解CSS浮动工作原理的一些很好的资源：

• http://css-tricks.com/all-about-floats/ 请参阅“The Great Collapse”一节
• http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
• http://phrogz.net/css/understandingfloats.html

Answer 2

从正常文档流中删除浮动元素。为了让它们的父级环绕它们，你需要在浮动符之后放置一些clear:属性集。

<div style=" border:1px solid #F00">
  <div style="float:left">float</div>
  <br style="clear:both;" />
</div>

Answer 3

你需要在包含样式规则clear的浮动div之后添加另一个div：两者。包含单个浮动子div的div将始终折叠并让它的子浮出。