先来了解一下block元素和inline元素在文档流中的排列方式。

　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

　　inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效

• 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
• 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

      假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列

floatp{float:left}向左浮动p{float:right}向右浮动

2)清除浮动

clearp{clear:none}clear:leftclear:rightclear:both需要注意的是:clear只会影响自身,不会影响其他元素.当他clear left 的时候,只是把不让自己左边有元素,当他昨天有浮动元素的话,就会自己另开一行.

ps:程序的执行是按照body里面的顺序执行,而不是按照head里面的属性执行,当你想更改之执行顺序的时候,就改body的顺序.

css-浮动

原文地址：http://www.cnblogs.com/52forjie/p/7569104.html