关于 CSS “float” 属性的某些东西一直让我感到困惑。为什么将“float”属性应用于要浮动的元素之前的元素？
为了帮助可视化我的问题，我创建了以下 jsFiddle http://jsfiddle.net/Ubutb/12/
在示例中，浮动属性应用于导航<div>而不是内容<div>。我会认为浮动需要应用于“内容”<div>元素，因为这些是您想要“浮动”出页面正常流程的项目。我显然错过了一些东西。有人可以解释得比我理解的更好吗？谢谢。
问问题
85 次
4 回答
2
使用float: {position}CSS 时，您是在告诉该元素“在其父元素的 {position} 侧浮动”。内容的行为正常，好像导航div甚至不存在一样，因为它是您指示的导航，以避开其他元素。
于 2012-06-01T14:35:40.397 回答
2
"float:left;"表示该 div 正在向 parent<div>的“左墙”推。。当"float:left;"在同一个容器中添加下一个 div 时，它会被推到左边，并撞到第一个 div 的“右墙”。 ..就像一个谜题。
容器的宽度决定了第二个"float:left;"div 是否有足够的空间放置在第一个旁边，或者它是否在下面。
如果每个 div 的宽度为 33%，并且没有边距，那么您通常可以让 3 个 div 漂浮在容器中，并且它们最终会在一条漂亮的线上。但是如果宽度是 34%，一个会在下面。
这是浮动 div 最简单的解释。当然，当它正确浮动时，反之亦然。
于 2012-06-01T14:45:31.590 回答
1
听起来您正在寻找一个很好的解释，解释为什么花车以它们的方式工作？这里有一些很好的写法：
- 所有关于CSS-Tricks 的浮点数
- 来自 Smashing Coding 的CSS 浮点理论
- 如何用通用语言解释 CSS Float？来自 StackOverflow
我自己的解释：浮动元素确实是浮动的。它旁边的元素正在做所谓的“包装”。
于 2012-06-01T14:42:38.893 回答
0
这是你想要的吗？jsfiddle
浮动位置是相对于“容器”又名“父”的（在这种情况下，没有容器的地方，后者是整个身体）
于 2012-06-01T14:36:27.913 回答