w3cschool教程上有关CSS 浮动的定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
从定义可以知道，float有以下特点：
设置float样式的元素不再占用文档流的位置，后续的元素能够占用空出的位置；具有float样式的元素按照设定的漂流方向（左或者右）漂流，直到外边缘碰到父容器边框或者另一个浮动框的边框；float最常用在div块状元素，实现某一区域的布局。下面都以div举例说明float的样式效果（本文的代码都是在Tomcat7+Firefox 29.0.1测试所得）。
不加float时的布局效果：
<html> <head> <title>float实例</title> <style text="text/css"> *{ margin:0px; padding:0px; } #all{ margin:0px auto; width:600px; height:900px; background-color:#888888; font-size:20px; } #a,#b,#c{ width:100px; height:50px; text-align:center; background-color:#00f000; border:1px solid black; } #a{ } #b{ width:150px; } #c{ width:200px; } </style> </head> <body> <div id="all"> <div id="a">第一个div</div> <div id="b">第二个div</div> <div id="c">第三个div</div> </div> </body> </html>效果如下：
今天先写到这里，改天再补上
转载于:https://www.cnblogs.com/lauyu/p/3771246.html
