css筆記 清除子元素對父元素的浮動效果的三種方法

2021-08-08 08:07:48 字數 1168 閱讀 7890

對於浮動元素,我們知道如果父元素不設定height,而子元素全部設定為浮動,父元素不會被撐開(也就是父元素為一條直線,height為0),我們看到的就是一條線在所有子元素上面。

例如:

child1

child2

child3

結果截圖如下:

這是由於浮動元素脫離標準流而存在,對於標準流與浮動元素就是實物與虛物之間的關係,如何清除浮動子元素對父元素的影響,有三種方法。

一.使用空標記清除浮動

以上面的例子為例,我們在浮動元素之後新增乙個空標記(沒有內容的標籤),並對該標記設定「clear:both」,即可清除上例中子元素對父元素的影響。

例如:上述id為father的div標籤新增乙個

child1

child2

child3

然後style標籤中新增乙個「null」類的樣式:

結果截圖如下:

注意:上述方法雖然可以清除浮動效果,但是卻增加了毫無意義的元素節點。

二.使用overflow屬性清除浮動

對父元素應用「overflow:hidden」也可以消除子元素對父元素的影響。

例如針對上述例子:

#father
同樣能夠實現方法一中的效果。

三.使用after偽物件清除浮動

我們可以通過在上述的father後面新增乙個內容來消除上述影響。

注:只需設定屬性』content』值為空即可。

例如:

child1

child2

child3

效果如上述其他方法,要注意的是,ie678其預設的內外邊距可能不同,故顯示的位置可能不同。

css 清除子元素浮動帶給父元素帶的影響

css語法 clearfix,wrap content tap wrap tap content ul clearfix after,wrap content tap wrap tap content ul after 運用less語法如下 1.建立乙個less檔案,檔名隨意,寫入下面 clearf...

css子元素繼承父元素屬性

樣例 ant design form表單中label樣式的修改 css屬性繼承 文字 color 顏色,a元素除外 direction 方向 font 字型 font family 字型系列 font size 字型大小 font style 用於設定斜體 font variant 用於設定小型大寫...

css子元素如何相對父元素定位?

css123 4567 891011 div1 div2 效果原理 瀏覽器渲染html,是有文件流的說法的,塊級元素換行渲染,行內元素行內渲染,在這裡,兩個div都是塊級元素,乙個父,乙個子,正常來說的渲染結果是父元素在瀏覽器左上角,子元素在父元素的左上角。如果我們要對子元素相對父元素進行定位,就要...