position和float如何影響元素型別
阿新 • • 發佈：2021-02-15
技術標籤：HTML+CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>position與float</title> </head> <body> <!-- position:static,absolute,relative,fixed; --> <!-- 知識點一 --> <!-- 定位和浮動如何影響盒子的display型別： relative|static : 作用元素原來是什麼型別的設定定位後依舊是原來型別，並不會對盒子的型別造成影響。 position:absolute | position:fixed | float:left ： 不論作用的元素原來是什麼型別（display:none除外，因為display:none的元素根本就不存在），元素都會被自動轉換成行內塊元素,這時，即便給作用元素設定 display:inline或者display:block，也依舊是不起作用的 --> <!-- 例如 --> <style type="text/css"> .sty_p{ width:200px; height:200px; background-color: pink; } </style> <!-- <span style="position:relative" class="sty_p">你好啊</span> --> <!--相對定位不改變元素型別 --> <!-- <span style="position:absolute;" class="sty_p"></span> --> <!-- <span style="float:left;" class="sty_p"></span>你好啊 --> <!-- <span style="position:fixed;" class="sty_p"></span> --> <!-- 這三個使行內元素變為行內塊元素 --> <!-- <span style="float:left;display:inline;" class="sty_p"></span>你好啊 --> <!-- <span style="float:left;display:block" class="sty_p"></span>你好啊 --> <!-- 變為行內塊後即便設定inline或block，這個也不起作用，如果多寫diaplay:inline-block也是多餘的 --> <!-- 知識點二 --> <!-- 定位元素與浮動之間有什麼影響 --> <!-- 一個元素如果設定了絕對定位和固定定位（ position:absolute | fixed;），就不能再給它設定浮動。即便給它設定了浮動，浮動也是不會起作用的。這是兩個不同的流，一個是浮動流，另一個是“定位流(這是自己起的名字，呵呵)”。 但是 設定相對定位和靜態定位的元素（relative |static ）可以給它設定浮動，他們的效果是相互疊加的 --> <!-- 相對定位和浮動同時使用效果會疊加，絕對定位使浮動屬性失效不起作用 --> <style type="text/css"> .sty_p{ width:200px; height:200px; background-color: pink; } </style> <!-- <span style="float:right" class="sty_p"></span> --> <!-- <span style="float:right;position:relative;top:50px;right:100px;" class="sty_p"></span> --> <!-- <span style="float:right;position:absolute;" class="sty_p"></span> --> <!-- 知識點三：浮動元素對文字沒有任何影響 --> <!-- 浮動產生的原因是為了解決圖文混排的問題，所以不管同一級別的浮動元素是誰覆蓋了誰，其中的文字都會被擠到元素的外邊，不會產生覆蓋。 --> <style type="text/css"> .sty_p{ width:200px; height:200px; background-color: pink; } .sty_y{ width:200px; height:200px; background-color: yellow; } </style> <!-- <div class="sty_p" style="float:left"></div> <div class="sty_y"></div> --> <!-- <div class="sty_p" style="float:left"></div> <div class="sty_y">你好啊</div> --> <!-- 知識點四：浮動元素對父元素的影響及BFC簡單介紹： 浮動元素的父元素是沒有高度的，除非其中的非浮動元素把它撐起來。（浮動元素無法撐起父元素的高度）但是如果給父元素新增overflow:hidden，就會使父元素產生高度。 這個的原理：是使父元素生成了一個BFC的獨立空間。 簡單來說，我們的HTML頁面是由很多box組成的，但其實不同型別的盒子的渲染規則是不一樣的，他們被分成兩種型別，一種是行內元素和行內塊元素的渲染規則，被稱為IFC（屬性為 block, list-item, table 的元素，會生成 block-level box）， 另一種是塊級元素的渲染規則，被稱為BFC（display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box） 而BFC定義是：它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的盒子如何佈局，並且這個區域和外部的區域毫不相干。 BFC有一個規則是：計算BFC的高度時，浮動元素也參與計算 所以在這個獨立空間裡，父盒子的高度計算就需要加上浮動元素的高度。--> <!-- 兩欄自適應佈局原理 --> <!-- BFC佈局規則中有一條規定：每個元素的margin的左邊， 和它的父元素的border的左邊相接觸(對於從左往右的的格式化的盒子，否則是相反的)。即使存在浮動的元素也是這樣。 所以，即使存在浮動的元素，但main的左邊依然是和父元素的左邊相接觸 BFC佈局規則中第四條規定： BFC的區域不會與float box重疊。 我們可以通過觸發mian使她生成一個BFC， 來實現自適應兩欄佈局。 --> <style type="text/css"> .lt{ float:left; width:200px; height:200px; background-color: red; } .main{ width:500px; height:500px; background-color: yellow; overflow:hidden; } </style> <div> <div class="lt"></div> <div class="main"> </div> </div> </body> </html>