css清除浮動定位造成的異常

2022-01-19 09:08:18 字數 1281 閱讀 2759

清除浮動是為了解決高度塌陷的問題:內層有好幾個div有寬有高,並且選擇了浮動定位,但是外層的div卻並沒有設定寬高。在非ie瀏覽器(如firefox)下,當容器的高度為auto,且容器的內容中有浮動(float為left或right)的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢位到容器外面而影響(甚至破壞)布局的現象。這個現象叫浮動溢位,為了防止這個現象的出現而進行的css處理,就叫css清除浮動。

沒有清除浮動前:高度為0

清除浮動後:有了高度

常見解決方案:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>document

title

>

head

>

<

style

>*p

/*清除浮動方法3 全域性 for ff/chrome/opera/ie8==

*/:after

.test

.div1

style

>

<

body

>

<

div

class

="test"

>

<

div

class

="div1"

>1

div>

<

div

class

="div1"

>2

div>

<

div

class

="div1"

>3

div>

div>

body

>

html

>

當然,你也可以直接給外層加個寬高 == 簡單粗暴又有效

或者,內層選擇html5的分列顯示,也是很好的方案

再或者,直接用一些框架的欄柵結構

css清除浮動定位造成的異常

清除浮動是為了解決高度塌陷的問題 內層有好幾個div有寬有高,並且選擇了浮動定位,但是外層的div卻並沒有設定寬高。在非ie瀏覽器 如firefox 下,當容器的高度為auto,且容器的內容中有浮動 float為left或right 的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得...

CSS清除浮動和定位

1.原來在一行中的兩個塊,會因為瀏覽器視窗的大小改變而改變其原來的位置 變成多行 瀏覽器視窗寬度不夠容納 解決方法 加個父div,並且設定寬度 father 左右 2.清除浮動clear 當元素有浮動屬性時,會對其父元素或後面的元素產生影響,出現乙個布局錯亂的現象。none 預設值。允許兩邊有浮動物...

css 清除浮動與定位

一 清空浮動的方法 box1 box 1 1 box 2 2 1.在最後乙個浮動的元素後新增乙個空標籤,並設定樣式 clear both box1 box 1 1 box 2 2 clear both 小結 優點 寫法簡單 缺點 新增了無意義的標籤2.給浮動元素的父元素新增樣式 overflow h...