如何解決浮動帶來的影響

2021-10-23 08:18:41 字數 1297 閱讀 9535

選擇器名

設定了浮動的框可以向左(left)或向右(right)移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。浮動並不存在於文件流之中

當我們給子元素設定了浮動float:left或float:right或兩者,但是沒有給父元素設定高度時,就會出現父元素高度塌陷問題。因為浮動元素脫離了文件流,所以包圍和文字的父元素盒子不佔據空間。所以父元素盒子就不會被所浮動的內容展開,從而出現了高度塌陷。

而因浮動的出現的高度塌陷會導致:

1、背景不能顯示

由於浮動產生,如果對父級設定了(css background背景)css背景顏色或css背景,而父級不能被撐開,所以導致css背景不能顯示。

2、邊框不能撐開

如果父級設定了css邊框屬性(css border),由於子級裡使用了float屬性產生浮動,父級不能被撐開,導致邊框不能隨內容而被撐開。

3、margin padding設定值不能正確顯示

由於浮動導致父級子級之間設定了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。

方法1、給父級定義height。缺點:擴充套件性不好

2、父級「overflow:hidden定位浮動開啟」bfc布局浮動/定位盒子的特點高寬都由內容撐開。缺點:ie6會失效

3、空標籤清除浮動。缺點:違反了結構行為樣式相分離的原則,生成無意義的空標籤

style

="clear

:both

">

div>

4、偽元素清除浮動clearfix(推薦使用)

/* 在需要清除浮動的父元素的選擇器後面加乙個clearfix偽元素選擇器 */

clearfix::after

比如說div2這個子元素需要浮動,那麼父元素則需要清除浮動:

class

="clear clearfix"

>

class

="div2"

>

>

div>

如何清除浮動帶來的影響

在前端開發中,清除浮動的方法有多種,開發人員可以根據自己的喜好選擇不同的方式。1 將設定float的元素的父元素也設定float。父元素也設定浮動,侷限性較大。2 設定父元素的overflow為hidden。3 設定父元素的display為inline block。缺點 可能不符合情況要求。4 浮動...

浮動布局所帶來的影響以及如何清除浮動

在頁面的布局過程中浮動是個好東西,我們經常會用到浮動布局,它可以使元素共享一行,極大的方便了我們的布局過程。但是很多人可能只是會用,對浮動的原理只是一知半解,如果沒有清晰的認識到浮動所帶來的影響以及如何清除浮動所帶來的影響,那麼面對 量龐大的頁面將會變得一頭霧水。所以接下來我們來深入學習一下浮動布局...

css中浮動和清除浮動帶來的影響

有很多時候,我們都會用到浮動,而我們有時候對浮動只是一知半解,卻不是太清楚它到底是怎麼回事,不知道各位有沒有和我一樣的感覺,只知道用它,卻不知道它到底是怎麼回事,所以,在學習的過程中,就要把乙個概念不是很清晰的問題把它弄清楚了,便於我們以後的使用。早些時候,w3c規定出來的浮動實際並不是為了布局所用...