[js的樂趣]關於float浮動的理解（舉例說明）
阿新 • • 發佈：2019-02-08
浮動
佈局時，因為一張圖片遲遲放不對位置，而導致頁面程序為0呢？
到底用display：inline-block；還是用浮動float來解決呢？
佈局時，因為一張圖片遲遲放不對位置，而導致頁面程序為0呢？到底用display：inline-block；還是用浮動float來解決呢？
是不是因為浮動，導致下面的同級盒子不在應有的位置位置上面呢？
在寫導航欄的時候，如何讓每個li都在一行顯示？
什麼是浮動？
float屬性定義了元素在哪個方向浮動
float：left/right/none/inherit
一、浮動也就脫離了標準文件流
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍。
舉個生活中的例子：人們在地面上排隊，當其得到一個飛行技能（也就是浮動float），那麼便可以不受地面的約束。
而且他原本的位置（佔位）也就不存在了，後面的人會向前進一位
舉個例子：
<style type="text/css"> .one{margin: 100px;} .on01 { width: 50px; height: 100px; background-color: #008000; float: left; } .on02{ width: 50px; height: 50px; background-color: #ccc;} .on03{ width: 50px; height: 50px; background-color: #7FFFD4; } </style> </head> <body> <div class="one"> <div class="on01">01</div> <div class="on02">02</div> <div class="on03">03</div> </div> </body>
這是三個不浮動的div：
給01div盒子一個float:left;
給三個div盒子都設定左浮動
那麼如何讓02和03 都在01的右側且並排顯示呢？
可以在02和03盒子加一個父盒子box,讓box左浮動02和03 不浮動（程式碼如下）
.box{ float: left; } .on02{ width: 50px; height: 50px; background-color: #ccc; }
.on03{ width: 50px;
height: 50px;
background-color: #7FFFD4;
float: left; }
<div class="one">
<div class="on01">01</div>
<div class="box">
<div class="on02">02</div>
<div class="on03">03</div>
</div>
</div>
css給我們另一個屬性來解決這種因浮動而產生煩惱 clear屬性，我在下一節寫成清除浮動的集中常見的方法