float 屬性的定義:使元素在哪個方向浮動
預設值為:none
注意:浮動元素會產生一個塊級框,而不論它本身是何種元素
一、float文法 - TOP
Float常跟屬性值left、right、none
Float:none 不使用浮動
Float:left 靠左浮動
Float:right 靠右浮動
float文法:
float : none | left |right
參數值:
none : 對象不浮動
left : 對象浮在左邊
right : 對象浮在右邊
HTML代碼:
代碼如下 |
複製代碼 |
<body> <div class="main"> <div class="d" id="d1">框1</div> <div class="d" id="d2">框2</div> <div class="d" id="d3">框3</div> <div class="d" id="d4">框4</div> </div> </body> |
1,當兄弟元素全為浮動元素時其父類元素在沒有自訂寬高時其高度將為零
css樣式:
代碼如下 |
複製代碼 |
.main { border: 1px solid ; } .d { border: 1px solid red; width: 50px; height: 50px; float: left; } |
顯示效果:
2,浮動元素會在一行之內空間不夠多餘的浮動元素會跳至下一行
css樣式:
代碼如下 |
複製代碼 |
.main { border: 1px solid ; width:130px; } .d { border: 1px solid red; width: 50px; height: 50px; float: left; } |
顯示效果:
3,浮動元素會脫離文字資料流,其參照父類元素
ccs樣式:
代碼如下 |
複製代碼 |
#d1{ float:left; } |
顯示:
ss浮動總結 - TOP
我們要區別與文字內容靠左( text-align:left)靠右( text-align:right)樣式,浮動只針對html標籤設定靠左靠右浮動樣式。float浮動樣式沒有靠中(浮動置中)的樣式,如果需要讓標籤對象置中我們在css布局置中相關文字給大家詳細講解介紹(css margin)。這裡記住浮動靠右使用float:right,浮動靠左使用float:left樣式即可。