float探索,脫離文件流?不脫離文件流?

2021-08-28 13:42:12 字數 496 閱讀 9961

float屬性是css2中的乙個屬性,很多時候我們都會用到她,但是通常只要一不小心就會遇到很多問題,跟設想的完全不一樣呀,怎麼回事???那麼這個時候我們應該冷靜下來好好探索一下這個屬性的用法,弄明白其原理,適用於什麼場景,這樣在任何情況下都能正確的使用她。

最初,float是應用於影象,使文字環繞在其周圍,使用float的元素會自動生成bense塊級框,而不管其本身是什麼元素。

下圖中img浮動,p元素並沒有完全頂上去,而是環繞在的周圍,也就是說p上的一部分文字空間仍然被img佔據著;但塊級元素div頂了上去。綜上說明float的元素脫離正常的文件流,但是還會佔據文件流的文字空間。

可以看出float脫離文件流不是完全脫離。

需要注意的地方:

float會使父容器的高度塌陷,也就是父元素在高度計算的時候會忽略浮動的元素。

CSS脫離文件流

脫離文件流 也就是將元素從普通的布局排版中拿走,其他盒子在定位的時候,會當做脫離文件流的元素不存在而進行定位。需要注意的是,使用float脫離文件流時,其他盒子會無視這個元素,但其他盒子內的文字依然會為這個元素讓出位置,環繞在周圍。其他盒子與其他盒子內的文字都會無視它。float 如上圖 div2實...

CSS脫離文件流 浮動

什麼是文件流?將窗體從上至下分成一行一行,並在每行中按從左至右依次排放元素,稱為文件流,也稱為普通流。這個應該不難理解,html中全部元素都是盒模型,盒模型占用一定的空間,依次排放在html中,形成了文件流。什麼是脫離文件流?元素脫離文件流之後,將不再在文件流中佔據空間,而是處於浮動狀態 可以理解為...

HTML文件流 文字流和脫離文件流

文件流 普通流 在文件流中,html 元素會按照其在 html文件中的位置順序來排布,將窗體自上而下分成一行一行,並在每行中左至右的挨次排放行內元素,遇到阻礙或者寬度不夠自動換行。而塊狀元素將獨佔一行。塊級元素和行內元素.文字流 文字流是相對於文字段落講的。可視為一串字元由左到右 由上而下的讀取和輸...