CSS学习之四 浮动 _CSS教程_CSS_网页制作_

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


相应的样式：


显示效果部分截图如下：

 图1 浮动性质（test1）

图2 浮动性质（test2）

总结得出浮动元素的基本性质：
浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示；
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个（实例中为父元素）任意非浮动元素靠齐；
浮动元素后面的内联元素会向此浮动元素的外边距靠齐。
元素设置为浮动之后，就生成一个块级框（css行高提出的概念），没必要再声明display:block，可以设置宽高。
请单击查看Demo
二、接下来细说浮动的几个规则
1、浮动规则1：
浮动元素的左（右）外边界不超出其包含块的左（右）内边界。
HTML代码：


样式：


2、浮动规则2：
浮动元素的左（右）外边界必须是源文档中之前出现的左（或右）浮动元素的右（左）外边界，除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面。
防止浮动元素彼此覆盖，保证所有浮动对象都可见。但是定位却容易导致元素覆盖！
同样请看源码：


样式：


图片较大，没有截图，请单击查看Demo
3、浮动规则3：
左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边；右浮动元素的左外边界不会在其左边任何左浮动元素的右边界的左边。
防止第二个浮动元素与第一个浮动元素有重叠区域。
HTML结构：


样式：


4、浮动规则4：
一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个元素时就好像在两个元素之间有一个块级父元素。
假如有三个段落，中间段落浮动，浮动段落会像有一个块级父元素（如div）一样浮动，能防止浮动段落一直向上移动到三个段落共同的父元素顶端。
HTML代码：


样式：


5、浮动规则5：
浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
防止浮动元素彼此覆盖，保证所有浮动对象都可见。但是定位却容易导致元素覆盖！
测试源码：


样式：


6、浮动规则6：
如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
进一步限制元素的向上浮动。
测试源码：


样式：


7、浮动规则7：
左（右）浮动元素的左（右）边有另一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右（左）边，即浮动元素不能超出其包含元素的边界，除非它太宽本身无法放下。
如果没有足够的空间，浮动元素会被“挤”到新行上。
测试源码：