1.浮動
文檔流
-
标準文檔流
類似于word文檔的圖檔與文字顯示
-
脫離标準文檔流
作用：用于設定圖檔或盒子的顯示方式：并排顯示
影響：遮蓋下一層元素，文字會環繞顯示行内元素無法設定寬高，在設定浮動後會擁有塊特性，可設定寬高。塊級元素在設定浮動之後原本獨占一行的特性消失根據寬高來占位置如圖：
代碼如下
當所有浮動都注釋掉<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ /* overflow: hidden; */ width: 200px; background-color: yellow; /* zoom: 1; */ } .one{ width: 50px; height: 60px; background-color: skyblue; /* 大哥的浮動 */ /* float: left; */ } .two{ width: 55px; height: 60px; color: white; background-color: black; /* float: left; */ } .three{ width: 75px; height: 70px; color: white; background-color: blue; /* float: left; */ } </style> </head> <body> <div class="father"> <!-- 如果給大哥設定浮動 二哥就不見了：隻是大哥飄起來了，飄到了二哥的頭上--> <div class="one"> 大哥 </div> <div class="two"> 二哥 </div> </div> <div class="three"> 小弟弟 </div> </body> </html>天藍和黑色都在黃色div内由上至下排列，藍色是額外的一個div，試一下如果給天藍添加浮動會有什麼影響
HTML基礎學習——浮動和定位 可以看到天藍色好像就浮起來，這是因為二第沒有足夠的空間施展能耐，這裡隻需要增加黑色的寬度就可以了。
HTML基礎學習——浮動和定位 HTML基礎學習——浮動和定位 如果給藍色增加浮動呢，他會飄起嗎？
其實他不會飄起來，因為藍色本來就是單獨處于一行。
如果給黑色也增加浮動 HTML基礎學習——浮動和定位 HTML基礎學習——浮動和定位 可以看到，都飄起來了是因為原本獨占一行的塊元素在使用浮動之後失去了塊元素的獨占一行的特性。
如何消除浮動帶來的影響
可以使用：
1.overflow：hidden 需要在盒子的父元素之中設定，
HTML基礎學習——浮動和定位 2.額外标簽法：clear：both
在自身元素中設定（不推薦）
3.僞元素：afte——額外标簽發的進階
4.雙僞元素：after、：before——推薦使用
- 2.定位
相對定位
position: relative; top: 40px; left: 40px;
相對于父檔案并且需要父檔案設定
相對位置position: relative;
然後在子一級檔案設定
絕對位置position: absolute;
絕對定位
position: absolute; top: 40px; left: 40px;
對于上一級定位屬性的父元素，如果沒有那麼直接使用body。會脫離标準文檔流
粘性定位
position: sticky;
父元素如果慢慢移出視窗，設定粘性定位的标簽不會動，直到最後跟随父元素移出視窗。