关于CSS浮动的问题

Question

据说 浮动框向左或向右移动，直到其边缘接触包含块的填充边缘或另一个浮动元素的边缘边缘

但我不认为这是正确的。 你能否提供一个正确解释的例子或解释（两种情况;对于第一个孩子和其他同胞div）

Answer 1

请参阅此demo page。

  

浮动框向左或向右移动，直到其边缘接触到包含块的填充边缘

<强>正确即可。标记为div的{​​{1}}总共偏移First item，原因是其容器上的填充30px和10px因其边距而导致。

  

或另一个浮动元素的边缘

也正确。请注意，20px和40px之间总共有First item，因为这两个元素都有Second item个边距。

已更新评论：浮动元素会使其超出文档的正常流程。也就是说，非浮动元素不会为浮动元素“腾出空间”。在大多数示例中，使用20px清除浮点数与其他方法相同，因此我使用它是因为它的标记较少。有关详细信息，请参阅Quirksmode article和counter example for overflow hidden。

Answer 2

这是一个简单的例子..

<style>
.size1{
   width: 50px;
   height: 50px;
   margin: 10px;
 }
 .size2{
   width: 400px;
   height: 400px;
   padding:50px;
 }
 .red{background-color:red;}
 .blue{background-color:blue;}
 .yellow{background-color:yellow;}
</style>

<div class='size2 red'>
  <div class='size1 blue' style='float:right'></div>
  <div class='size1 yellow' style='float:right'></div>
</div>

Answer 3

您的引用是正确的

  

浮动框向左或向右移动直到其边缘   触摸包含块的边缘边缘或边缘边缘   另一个浮动元素

基本上它反映了规范：

  

“浮动的盒子将向左或向右移动，直到它们的外缘   接触包含块边缘或另一个浮子的外边缘。“

http://www.w3.org/TR/CSS2/visuren.html#floats

据我所知，外边缘还包括margin和padding。

请在此处查看此示例，其中margin和padding受到尊重。

示例： http://jsfiddle.net/jasongennaro/K6mK5/