基本概念
浮動模型也是一種可視化格式模型该镣，浮動的框可以左右移動（根據float屬性值而定）彻采，直到它的
外邊緣碰到包含框或者另一個浮動元素的框的邊緣档插。
浮動元素不在文檔的普通流中沙绝，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣.
正常情況
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; ">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow;">
</div>
</div>
Paste_Image.png
紅向右浮動
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:right;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; ">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow;">
</div>
</div>
Paste_Image.png
紅框左移,覆蓋綠框
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow;">
</div>
</div>
Paste_Image.png
都向左浮動,父元素高度為0
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
Paste_Image.png
如果包含塊兒太窄無法容納水平排列的三個浮動元素,那么其它浮動塊兒向下移動,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被卡住
<div style="border: solid 5px #0e0; width:250px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
Paste_Image.png
卡住了
<div style="border: solid 5px #0e0; width:250px;">
<div style="height: 120px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
Paste_Image.png
行框
浮動會讓元素脫離普通流, 如果浮動的元素后面有一個文檔流中元素,那么這個元素的框會表現(xiàn)的像浮動元素不存在,但是框的文本內容會受到浮動元素的影響,會移動以留出空間.用術語說就是浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框
不浮動
<div style="border: solid 5px #0e0; width: 250px;">
<div style="height: 50px; width: 50px; background-color: Red;"></div>
<div style="height: 100px; width: 100px; background-color: Green;">
11111111111
11111111111
</div>
</div>
Paste_Image.png
浮動
<div style="border: solid 5px #0e0; width: 250px;">
<div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
<div style="height: 100px; width: 100px; background-color: Green;">
abc def ghi
abc def ghi
abc def ghi
</div>
</div>
Paste_Image.png
上面放不下搏明，放到下面去
Paste_Image.png
可以看出浮動后雖然綠色div布局不受浮動影響，正常布局闪檬，但是文字部分卻被擠到了紅色浮動div外邊熏瞄。要想阻止行框圍繞在浮動元素外邊，可以使用clear屬性谬以，屬性的left，right由桌，both为黎，none表示框的哪些邊不挨著浮動框
<div style="border: solid 5px #0e0; width: 250px;">
<div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
<div style="height: 100px; width: 100px; background-color: Green; clear:both;">
11111111111
11111111111
</div>
</div>
Paste_Image.png
Paste_Image.png
作者：王翔 QQ：592767079 Email：wangxianglengye.com 期待共同進步！
