css - 为什么浮动属性文本也不改变其与背景的位置？

Question

我有这个代码

<div id="one" class="test">first div</div>
<div id="two" class="test">second div div</div>
<div id="three" class="test">third  div</div>

当我将第一个和第二个 div 向左浮动而不是第三个 div 时，第三个 div 的背景向上移动，这没关系，因为第三个 div 应该设置为 clear:both。但我想知道为什么第三个 div 的文本也没有出现，因为文本在 div 内。

小提琴链接在这里http://jsfiddle.net/babu333/3KPxE/3/

Answer 1

从我的修补来看，浮动似乎破坏了#third元素的流动，而元素内的文本保持其流动，但被迫从浮动元素向下移动。

添加overflow属性以获得更易于管理的结果：

.test{
  width:100px; 
  height:50px; 
  margin:20px; 
  padding:10px;
  overflow: hidden;
}

jsfiddle

在处理浮动时，我发现添加overflow: hidden到父容器总是最好的。