float以及清除

2021-08-09 23:11:30 字數 771 閱讀 9488

浮動的基礎作用

就是讓文字環繞。

包裹性

設定了float之後,其寬度會自動調整為包裹住內容寬度,而不是撐滿整個父容器。display樣式是沒有變化的,還是block。

破壞性

使用float的會無法與文字在同一行顯示,並且高度為0,所以會造成父元素高度的塌陷,因此就要清除浮動。

浮動元素和絕對定位元素相比,區別在於絕對定位的元素脫離了文件流,而浮動元素依舊在文件流中。

清除float

1. overflow:hidden + zoom方法

要注意overflow:hidden,如果裡面的元素要是想來個margin負值定位或是負的絕對定位,會被直接被裁掉。

2.偽元素

.clearfix:after

推薦使用這個方法,不會影響其他樣式,通用性強,覆蓋面廣。

合理使用float進行頁面布局

1.三列布局

經典的左中右

2.兩列布局

左右結構

清除浮動以及什麼是浮動(float)

網頁布局的核心 就是用 css 來擺放盒子。css 提供了 3 種機制來設定盒子的擺放位置,分別是普通流 標準流 浮動和定位,其中 浮動 思考題 我們首先要思考以下2個布局中最常見的問題?如何讓多個盒子 div 水平排列成一行?如何實現盒子的左右對齊?雖然可以使用行內塊 inline block 但...

float清除浮動

影響 浮動會使元素具有塊級元素和行內元素的特點 即內聯塊的特點 讓塊元素在同一行顯示。內聯塊 inline block 和浮動 float left right none 元素脫離文件流,按照浮動方向移動,遇到父級邊界或者相鄰浮動元素停住 但是無論哪種方式都需要做一些處理 去除inline bloc...

float清除浮動

在非ie瀏覽器下,當容器的高度為auto,且容器的內容中有浮動 float為left或right 的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢位到容器外面而影響 甚至破壞 布局的現象。即父級物件盒子無法被撐開,這個現象叫浮動溢位,為了防止這個現象的出現而進行的css處理,...