CSS学习之四 浮动

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

 图1 浮动性质（test1）

图2 浮动性质（test2）

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

.float { width: 400px; }