css中的浮动

“浮动元素的定位仍是基于正常的文档流，而后从文档流中抽出并尽量远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其余元素将忽略该元素并填补他原先的空间。”  

　　“元素浮动后将自动转为块级元素。该元素能够被移动至当前行的左侧或右侧。属性以下：float: left, float: right or float: none” 

　　“你应该为全部的浮动元素设定宽度属性（除非是＜img＞元素，因其具备隐含的宽度）。若是不设定宽度，结果将是不可预知的。” 

　　“举例来讲，浮动元素应该定义宽度属性，不管是显式指定的仍是隐含的。另外，它会尽量的水平的填充容器元素，就像非浮动内容那样，不给其余内容空间以围绕它们。其次，和正常文档流中的元素不一样，浮动元素的垂直边距(margin)不会叠加。最后，浮动元素能够和临近在正常文档流中块级元素重叠（译注：浮动元素不占任何正常文档流空间，因此建议不要理解成重叠，而是腾空浮动的概念。）。” 

　　“首先咱们要牢记的一件事情是，浮动元素只能浮动至左侧或者右侧，没有浮动至中间一说，这是不少新手容易范的错误。记住，最基本的规则，浮动元素只能浮动至两侧。”  

　　“当咱们让一个元素浮动，它会往右或者往左浮动直至遇到容器的边缘。若是咱们向同一方向再浮动一个元素，它会浮动直至碰到前一个浮动元素的边缘。若是咱们浮动更多的元素，他们将一个挨一个排列，但不久就会空间不足，当该行已经没法容纳更多的浮动元素，则下一个浮动元素会换行继续排列。”   

　　Containing blocks or containing boxes：“容器元素是指包含其余子元素的行级或块级元素。。。。” 　 

　　“当明确指定时，浮动元素垂直位置由它原先在文档流中的位置决定，顶端与当前行顶端对其。可是水平方向上，它尽量远的向容器元素边缘移动，可是仍遵循容器元素的填充距离(padding)。同行的行内元素则围绕浮动元素排列。”  

　　“因为浮动元素不占据正常文档流空间，因此浮动元素先后那些未明确指定位置的块级元素会占据浮动元素原本应该处在的位置，就好像它历来未曾存在过。而浮动元素以后的那行会根据浮动元素缩小宽度。浮动元素以前的元素则会从新被排列，占据独立的一行。（译注：ie 和 ff 在这种状况下的表现不尽相同）”  

　　“若是当前行的水平方向上没有足够的空间容纳浮动元素，则向下一行，直至有能容纳该元素的行。”  

　　“任何浮动元素都不可能超过原来所处文档留位置的上边界。浮动元素的顶端一定和当前行顶端对齐（或者在没有当前行元素时和前一个块级元素底部边缘对齐）。” 

　　“想要真正理解浮动理论，你必须明白在CSS中什么是行 (line box)。不幸的是，为了解释什么是行，你必须先明白什么是行级元素。行级元素指的是那些非块级元素，例如＜em＞而行是一个逻辑上的概念，是一个虚拟的矩形，包含了组成该行的全部行级元素，其高度至少等于这些行级元素中最高的那个。”  

　　“若是咱们将Div中全部的列都加上 float: left 它们会挨个向左排列，若是咱们但愿在页面底部有一个页脚，并不须要一个最长的列，只要加上 clear: both 就能够了” 

　　“使用浮动元素包含浮动元素这样的布局方式有一个潜在的缺点，即你的页面是否可以一直保持一致的展示效果将取决于浏览器的实现是否保持一致。特别是当浮动元素是一个更为复杂的布局中的一部分的话，将变得更加不堪一击。”