【網頁設計入門】06 .Float
●Float (漂浮)
Float可以使物件「漂浮起來」，單純使用float而未做其他設定，浮起的物件會置於其他物件的「上層」而蓋住底下的物件。
Float的寫法為：float:left; 或 float:right; ，left或right會決定浮起的物件由左或由右靠齊。
通常會在ul內的li元素內使用float:left，使子元素li向左浮動靠齊，再使用margin設定物件與物件的間距。(如圖例)
 |
| 在ul內的li元素內使用float:left，使子元素li向左浮動靠齊，並使用margin設定物件與物件的間距。 |
 |
| 呈現結果 |
若使用 float:right; 則物件會由右至左排列。
●float的問題(1)：後方高度消失──後方物件使用clear:both;
套用float時，由於物件浮起至上層(跑到文檔外)，寫在float下方的其他元素，會往上遞補，造成上層物件(float)遮蓋下方物件的狀況。
此時在最後一個float物件及後方第一個物件加上clear:both; 即可清除覆蓋的狀況。
 |
| 加上clear:both;即可清除float的覆蓋。 |
留言
張貼留言