1.Float浮動和清除浮動
阿新 • • 發佈：2018-03-17
BE 知識 簡單 替換元素 float 浮動元素 demo 所有 技術
1.Float的介紹
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄(塌陷的產生)。
註：假如在一行之上只有極少的空間可供浮動元素，那麽這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
浮動模型的基本知識：浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣.《CSS Mastery》一書中講的特別有趣和好理解，我簡單的用幾個demo介紹一下。
a.不浮動的時候 <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px; "> </div> </div>
b.當red部分右浮動：<div style="border: solid 5px #09F; width:300px;"> 父元素內容 <div style="height: 100px; width: 100px; float:right;"> </div> <div style="height: 100px; width: 100px; "> </div> <div style="height: 100px; width: 100px;"> </div>
c.當red部分左浮動：<div style="border: solid 5px #09F; width:300px;">
父元素內容
<div style="height: 100px; width: 100px; float:left;"></div>
<div style="height: 100px; width: 100px; "></div>
<div style="height: 100px; width: 100px; "></div>
</div>
此時的green和yellow部分和”父元素內容”是在普通文檔流中，red部分覆蓋了文檔流中的green部分。
d.所有的向左浮動,父元素的高度為0<div style="border: solid 5px #09F; width:300px;">
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
當所有的元素都向左或者是向右浮動（此例子效果相同如上圖），父元素未浮動，此時父元素就會出現塌陷，即父元素的高度為0px。
如果父包含塊太窄而無法容納水平排列的多個浮動元素時,那麽其它浮動塊兒向下移動,,直至找到有足夠的寬度容納浮動塊,如果浮動元素的高度不同,那麽在向下移動的時候可能會被卡住。
e.當父元素的寬度不足以容納所有的浮動元素時，浮動塊就會下移，如下圖：<div style="border: solid 5px #09F; width:240px;">
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
<div style="height: 100px; width: 100px; float:left;">
</div>
</div>
f.當高度不等時會出現類似“卡住了”現象，如下圖<div style="border: solid 5px #09F; width:240px;">
<div style="height: 110px; width: 100px; float:left;"> </div>
<div style="height: 100px; width: 100px; float:left;"> </div>
<div style="height: 80px; width: 100px; float:left;"> </div>
</div>
1.Float浮動和清除浮動