CSS浮动布局初步

      浮动和定位是CSS

布局当中很重要的两种方法，这一篇先讲浮动布局，定位留在下一篇。

一、先说说浮动的性质吧，请看HTML代码：

相应的CSS代码：

部分截图如下：

总结得出浮动元素的性质：

1. 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
2. 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个（实例中为父元素）任意非浮动元素靠齐
3. 浮动元素后面的内联元素会向此浮动元素的外边距靠齐

        元素设置为浮动之后，就生成一个块级框（css行高提出的概念），没必要再声明display:block，可以设置宽高。

请单击查看Demo

二、接下来细说浮动的几个规则。

1、浮动规则1：

        浮动元素的左（右）外边界不超出其包含块的左（右）内边界

HTML代码：

相应CSS样式：

由于图片较大，不截图了，请单击查看Demo

2、浮动规则2：

        浮动元素的左（右）外边界必须是源文档中之前出现的左（或右）浮动元素的右（左）外边界，除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面

防止浮动元素彼此覆盖，保证所有浮动对象都可见。但是定位却容易导致元素覆盖！

同样请看源码：

CSS样式：

请单击查看Demo

3、浮动规则3：

        左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边；右浮动元素的左外边界不会在其左边任何左浮动元素的右边界的左边。

防止第二个浮动元素与第一个浮动元素有重叠区域。

HTML结构：

样式：

请单击查看Demo

4、浮动规则4：

        一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个元素时就好像在两个元素之间有一个块级父元素。

假如有三个段落，中间段落浮动，浮动段落会像有一个块级父元素（如div）一样浮动，能防止浮动段落一直向上移动到三个段落共同的父元素顶端

HTML结构：

风格：

请单击查看Demo

5、浮动规则5：

        浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。

防止浮动元素彼此覆盖，保证所有浮动对象都可见。但是定位却容易导致元素覆盖！

HTML结构：

风格：

请单击查看Demo

6、浮动规则6：

        如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。

进一步限制元素的向上浮动

HTML结构：

风格：

请单击查看Demo

7、浮动规则7：

        左（右）浮动元素的左（右）边有另一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右（左）边，即浮动元素不能超出其包含元素的边界，除非它太宽本身无法放下。

如果没有足够的空间，浮动元素会被"挤"到新行上。

HTML结构：

风格：

请单击查看Demo

8、浮动规则8：

        满足其他约束条件时，浮动元素必须尽可能高的放置。

浮动元素的顶端应当与其标记所在的行框（行高中提出的概念）的顶端对齐。

HTML结构：

风格：

请单击查看Demo

9、浮动规则9：

        浮动元素必须尽可能朝着所浮动的方向向父元素内边距靠近，且位置越高，靠近的程度越大。

HTML结构：

风格：

请单击查看Demo

三、下面讲讲清除浮动吧

        当一个父的盒子包含浮动的子元素时，为了让父元素完全显示（或者说高度自适应），这时候我们需要清除浮动。下面归纳四种办法实现。

HTML结构：

风格：

由此总结出清除浮动的办法：

1. 给父元素设置浮动；
2. 对父元素使用溢出隐藏的办法；
3. 对父元素使用:after伪对象实现；
4. 空标签法。

请单击查看Demo

四、最后再说一说浮动元素与非浮动元素混合布局时，它们的重叠顺序：

假设有如下HTML代码：

风格：

结论：与浮动元素重叠时的布局：

1. 行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素"之上"显示
2. 块框与一个浮动元素重叠时，其边框和背景在该浮动元素"之下"显示，只有内容在浮动元素"之上"显示

请单击查看Demo

五、浮动元素的居中

        还有就是关于浮动元素的居中问题，这里限于篇幅，不再赘述，请扩展阅读："实现浮动后的li元素居中"以li元素的居中为例讲解如何实现浮动元素居中，推荐使用相对定位法实现。