the inside story of css float

1. The Inside Story Of CSS Float

2. 浮动的初始概念 你可能对浮动元素的概念已经有所了解，浮动不完全是定位，也不是正常的流布局。 http://www.swordair.com/blog/2010/08/415 CSS 规定：a. 任何元素都可以浮动；b. 浮动不能被继承； 浮动定义：浮动是处于文档流中的元素，脱离了源文档流，通常是左（右），元素浮动之后，其周围的元素将自动补齐其留下来的空间 浮动属性：left | right | none | inherit http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ 一个浮动的例子： <div class="box"> <img class="fl" src="beauty.png" alt=" /> <p> The concept of floats is probably one of the… </p> </div>

3. 浮动元素 用 CSS 浮动元素时，会出现一些有意思的问题 1. 浮动元素会脱离原先的文档流； 2. 浮动元素的外边距不会合并； 3. 如果要浮动一个非置换元素，必须为其声明一个 width 属性 4. 行内元素设置浮动之后，将自动转化为块级元素。 还是刚才的例子： <div class="box"> <img class="fl" src="beauty.png" alt=" /> <p> The concept of floats is probably one of the… </p> </div>

4. 不浮动 除了 left 和 right 之外，float 属性还有一个值，也就是默认值 none； 这样的设置似乎有些多余，因为要让一个元素不浮动，最直接的方式就是不声明 float 。 不过他确实很重要，如果没有这个值，所有的元素都会以某种方式浮动。 而且，当你需要重置元素 float 属性的时候，就会用到。 一个的例子： <div class="box"> <img class="nfl" src="beauty.png" alt=" /> <p> The concept of floats is probably one of the… </p> <p> The concept of floats is probably one of the… </p> </div>

5. 浮动的详细内幕 为了更好的理解浮动的详细，我们需要建立包含块（containing block）的概念。 http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ 这个很重要。浮动元素的包含块是其最近的块级祖先元素。 下面的例子当中，浮动的 img和 p 元素的包含块就是 div.box 一个的例子： <div class="box"> <img class="nfl" src="beauty.png" alt=" /> <p> The concept of floats is probably one of the… </p> <p> The concept of floats is probably one of the… </p> </div>

6. 浮动的详细内幕 俗话说：不规矩，无以成方圆。浮动也是如此。 有一系列的规则控制着浮动元素的摆放。 一、浮动元素外边界不能超出其包含块的内边界。 一个的例子： <div class="box"> <img class="nfl" src="beauty.png" alt=" /> <p> The concept of floats is probably one of the… </p> <p> The concept of floats is probably one of the… </p> </div> margin padding ① ②

7. 浮动的详细内幕 二、浮动元素的外边界必须是源文档中之前出现的浮动元素的外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。 这条规则防止了浮动元素的彼此覆盖。因此，所有的浮动内容都是可见的，不用担心浮动元素之间相互重叠，这使得浮动很安全 margin padding ① ② ③

8. 浮动的详细内幕 三、左浮动元素的右外边界不会在其右浮动元素的左外边界的右边。 右浮动元素的左外边界不会在其左边任何浮动元素的右外边界的左边。 这条规则进一步防止了浮动元素的重叠 margin padding ① ②

9. 浮动的详细内幕 四、一个浮动元素的顶端不能比其父元素的内顶端更高，如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级元素。 这条规则前半部分防止了浮动元素的浮动到文档的顶端。 而后半部分则防止了所有的浮动元素一起向上浮动到父级元素的顶端。 margin padding ① ② ③

10. 浮动的详细内幕 五、浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。 这条规则类似于规则四，同时也规定了浮动元素之间的摆放位置 margin padding ① ② ③

11. 浮动的详细内幕 六、如果文档中一个浮动元素之前出现另一个元素， 浮动元素的顶端不能比包含该元素所生成框的任何行框顶端高。 类似于规则四和五，这个规则进一步限制了元素的向上浮动。 margin padding ① ② ③

12. 浮动的详细内幕 七、左（右）浮动元素的左（右）边有另外一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右边 （左边） 也就是说，浮动元素不能超出其包含元素的边界，除非它太宽，本身都无法放下。这就可以防止多个浮动元素位于同一水平行上，超出其包含块的边界。如果没有足够的空间，后面的浮动元素就会被挤到新的一行。 margin padding ① ② ③ ④ ⑤

13. 浮动的详细内幕 八、浮动元素必须尽可能高的放置 这条规则基于规则七的基础上 九、浮动元素尽可能远的的放置。 margin padding ① ② ③ ④ ⑤

14. 浮动的行为 http://isd.tencent.com/?p=1122 http://www.positioniseverything.net/easyclearing.html http://www.webtoolkit.info/css-clearfix.html http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/ 浮动的清除

15. The End 祝：新年快乐！ 兔年吉祥！