踩坑 消除浮動

2021-08-29 10:04:23 字數 1084 閱讀 5572

又遇到了浮動問題,有一點點收穫,雖然還不完整,以後再補充

先給出乙個浮動的栗子:

使用 clear 屬性來消除浮動

w3c 上 clear 的說明:clear 屬性定義了元素的哪邊上不允許出現浮動元素,如果宣告為左邊或右邊清除,會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下

上圖的情況,是一種子元素全為浮動元素,由於浮動元素脫離文件流,父元素的高度無法自適應

所以需要想辦法把父元素「撐大」,有兩種解決方法:

1. 在浮動元素後面新增 

float left

float right

為了是原理更加明顯,我稍微修改了一下**:

我們可以發現,不僅父元素被撐開了,消除元素還換行了,正好在浮動元素之下(對應上面 clear 說明)

2. 在父元素上新增 clear 樣式

.div:after
同樣修改一下**:

效果一模一樣

還發現乙個小細節:

:after 選擇器在被選元素的內容後面插入內容,我一直以為黃框框是加在綠框框下面,實際上是在綠框框的裡面。所以,內容後面插入的內容也是包括在被選元素裡面的

佔坑:

浮動的消除

當divouter內有乙個divinner,divinner如果設定了浮動後,divouter的大小會變得不受divinner影響,此刻就需要消除divinner的浮動效果 方法 給divouter設定overflow hidden overflow hidden 是指溢位部份隱藏,但卻能清除浮動。...

div標籤消除浮動

1 第乙個div 第二個div 1 的截圖為,可以看到,id2和id3並沒有在id1中。這就是沒有清除浮動的效果。清除浮動的方法 1 對父級設定合適的高度 對父級設定合適的高度進行清除浮動,父級內內容的高度為20px 2px 22px,在id1中增加樣式height 22px 即可。效果圖 缺點 對...

CSS如何消除浮動

當我們布局網頁一般是先分成乙個乙個div區域,再逐一雕琢。但div預設行為 寬100 多個div從上到下 在一些場景卻不太適合,需要搭配float使用。浮動 float,浮動會脫離預設的文件流,浮動層和預設文件層就好像ps工具中的兩個圖層,互相不搭理 如果div容器不設定width 寬度由預設100...