关于 CSS 浮动的问题答案

【问题标题】：Question on CSS float关于 CSS 浮动的问题
【发布时间】：2011-08-31 20:26:50
【问题描述】：

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

但是我不认为这是正确的。您能否提供正确解释的示例或解释（两种情况；对于第一个子 div 和其他兄弟 div）

【问题讨论】：

您认为哪一部分不正确。你能否举个例子说明你在哪里看到的？
不幸的是我现在在我的 iPad 上，所以没有代码..但在我的例子中，左边的浮动没有触及包含块的填充边缘..
@testndtv，请参阅下面我编辑的答案
我得到了一些出色的答案...特别是发布了 tge jsfiddle 演示..我相信这会帮助很多对 float 的实际工作感到困惑的人..再一次，谢谢你所有的努力并提供了很好的解决方案..如果可以的话，我会接受所有的答案..但不幸的是，我不得不考虑 1..

标签： html css css-float

【解决方案1】：

看到这个demo page。

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

正确。标记为First item 的div 总共偏移了30px，这是由于其容器上的填充10px 和20px 由于其边距所致。

或另一个浮动元素的边缘

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

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

【讨论】：

只有一个问题..我发现添加 float left tp 容器 div 根本没有区别..为什么会这样？
而且必须说..您的 jsfiddle 示例经过深思熟虑..值得 1000 多票..
为了回答您的评论，浮动容器没有改变任何东西的原因是因为我包含了一个额外的属性来“清除”浮动子元素的效果（我使用了overflow: hidden;），其最终结果与浮动容器相同。为了您的理解，在这个版本上尝试相同的修改，没有overflow: hidden;：jsfiddle.net/skjhe
再次感谢...2 个问题； 1.您能否解释一下添加溢出：隐藏属性...它会影响容器本身还是间接影响子元素？ 2.对于任何跨浏览器兼容的布局，实现此的正确或更好的方法是什么？（浮动容器或添加溢出属性）
正确！浮动元素将为其他浮动元素腾出空间。

【解决方案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>

【讨论】：

【解决方案3】：

你的报价是正确的

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

基本上它反映了规范：

“浮动框将向左或向右移动直到它们的外边缘触及包含块的边缘或另一个浮动的外边缘。”

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

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

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

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

【讨论】：