CSS Float(浮動)
#什麼是 CSS Float(浮動)?
CSS 的 Float(浮動),會使元素向左或向右移動,其周圍的元素也會重新排列。
Float(浮動),往往是用於圖像,但它在佈局時一樣非常有用。
元素怎樣浮動
元素的水平方向浮動,意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動,直到它的外緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之後的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
CSS float 浮動屬性
本篇主要介紹float屬性:定義元素朝哪個方向浮動。
1. 頁面佈局方式:介紹文件流程、浮動圖層以及float屬性。
2. float:left :介紹float為 left 時的佈局方式。
3. float:right :介紹float為 right 時的佈局方式。
4. 相鄰元素含有float屬性:介紹相鄰元素含有float屬性時的佈局方式。
1. 頁面佈局方式
頁面佈局方式,主要包含:文件流程、浮動層、float屬性。
1.1 文檔流程
HTML頁面的標準文檔流程(預設佈局)是:從上到下,從左到右,遇塊(區塊級元素)換行。
1.2 浮動層
浮動層:給元素的float屬性賦值後,就是脫離文檔流,進行左右浮動,緊貼著父元素(默認為body文本區域)的左右邊框。
而此浮動元素在文檔流空出的位置,由後續的(非浮動)元素填充上去:塊級元素直接填充上去,若跟浮動元素的範圍發生重疊,浮動元素覆蓋塊級元素。內聯元素:有空隙就插入。
1.3 float 屬性介紹
① left :元素向左浮動。
② right :元素向右浮動。
③ none :預設值。
④ inherit :從父元素繼承float屬性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2.3-float属性</title> <style type="text/css"> #a { background-color:Red; height:50px; width:100px; } #b { background-color:Yellow; height:50px; width:200px; } #c { background-color:Blue; height:50px; width:300px; } #d { background-color:Gray; height:50px; width:400px; } </style> </head> <body> <div id=a >div-a</div> <div id=b>div-b</div> <div id=c>div-c</div> <input type="text" value="input1" /> <input type="text" value="input2" /> <input type="text" value="input3 " /> <div id=d>div-d</div> <input type="text" value="input4 " /> </body> </html>