標籤:head 3.2 填充 預設 區塊層級元素 邊框 技術 換行 char
一、相關概念介紹
1、文檔流
HTML頁面的標準文檔流(預設布局)是:從上到下,從左至右,遇塊(區塊層級元素)換行。
2、浮動層
給元素的float屬性賦值後,就是脫離文檔流,進行左右浮動,緊貼著父元素(預設為body文本地區)的左右邊框。
注意事項:
① 浮動元素在文檔流空出的位置是由續的(非浮動)元素填充上去。
② 區塊層級元素直接填充上去,若跟浮動元素的範圍發生重疊,浮動元素覆蓋區塊層級元素
二、原始碼實現方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>float屬性</title> <style type="text/css"> #a { background-color: #008eb7; height:30px; width:100px; } #b { background-color: #ff8ff5; height:30px; width:200px; } #c { background-color: #33fff2; height:30px; width:300px; } #d { background-color: #33bb00; height:20px; width:170px; } </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>
三、float實現的具體過程
注意事項:視圖呈現效果與瀏覽器的寬度有關。
1、float : left
1.1 針對區塊層級元素的實現過程
① 代碼變更
div-a 添加:float:left
div-b 添加:float:left
div-c 添加:float:left
② 瀏覽器的寬度逐漸增大的視圖效果
1.2 針對內嵌元素與區塊層級元素混合的實現過程
① 代碼變更
div-b 添加:float:left
input2 添加:float:left
div-d 添加:float:left
② 瀏覽器的寬度逐漸增大的視圖效果
2、float : right
2.1 float : right與float : left實現過程一致
2.2 注意事項:
① 相鄰的浮動元素,right屬性最前面的元素,排在最右面。
② 成為浮動元素後,在浮動層擁有內嵌元素的"特性",當多個浮動元素一排容不下時,就換行。
3、height高度不等的元素
3.1 內嵌元素與區塊層級元素混合
改變div-d的高度後前後對比圖
3.2 區塊層級元素
4、結論
① height不相等的div浮動元素排序時,照樣擁有內嵌元素的"特性",當多個浮動元素一排容不下時,就換行。
② 成為浮動元素後,在浮動層擁有內嵌元素的"特性",當多個浮動元素一排容不下時,就換行。
css float 浮動屬性