CSS float : Why is float applied to the element just prior to the element to be floated?

Question

关于 CSS“float”属性的某些东西一直让我感到困惑。为什么将“float”属性应用到您希望 float 的元素之前的元素？

为了帮助可视化我的问题，我创建了以下 jsFiddle http://jsfiddle.net/Ubutb/12/

在示例中， float 属性应用于导航 <div>而不是内容<div> .我本以为 float 需要应用于“内容”<div>元素，因为这些是您希望从页面的正常流程中“ float ”出来的元素。我显然错过了一些东西。有人能解释得比我理解的更好吗？谢谢。

Answer 1

"float:left;"意味着 div 正在插入父级 <div>的“左墙”……然后是下一个"float:left;" div 被添加到同一个容器中，它会被推到左边，并撞到第一个 div 的“右墙”....就像一个拼图。

容器的宽度决定第二个 "float:left;" div 有足够的空间布置在第一个旁边，或者如果它在下面。

如果每个 div 的宽度为 33%，并且没有边距，那么您通常可以在一个容器中保留 3 个 float 的 div，并且它们最终会排在一条漂亮的线上。但是如果宽度是 34%，一个就会在下面..

这是对 float div 最简单的解释。当然，当它向右浮动时，情况正好相反。