清除浮動的6中方法總結

2022-06-15 14:48:09 字數 1163 閱讀 2003

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>清除浮動

title

>

<

style

>

/*1.直接給父元素新增高度

擴充套件性不好

2.父元素新增overflow: hidden;

ie6 7 底下不支援bfc

3.父元素新增浮動,float: left

ie6 7 底下不支援bfc

4.通過新增br標籤

ie6 不支援

違反了結構 行為 樣式 相分離的原則

5.通過空標籤clear: both 清楚浮動

違反了結構 行為 樣式 相分離的原則

ie6 下元素的最小高度為19px(設定高度1-19px 都是19px)

可以嘗試給元素的fontsize設定0到2px

6.偽元素清除浮動

父元素中新增樣式和偽元素樣式

*zoom: 1;

:after

如果要考慮ie6 ie7 最好的方法是偽元素 + 開啟haslayout

不考慮的話偽元素就是最好的方法

因為ie6 7 不支援偽元素,所以要額外的去開啟 haslayout

*/* #wrap

#inner

/*6.偽元素清除浮動

*/.clearfloat

.clearfloat:after

style

>

head

>

<

body

>

<

div

id='wrap'

class

='clearfloat'

>

<

div

id='inner'

>

div>

div>

body

>

html

>

清除浮動6中方法

使用display inline block會出現的情況 1.使塊元素在一行顯示 2.使內嵌支援寬高 3.換行被解析了 4.不設定的時候寬度由內容撐開 5.在ie6,7下步支援塊標籤 由於inline block屬性換行的時候被解析 有間隙 故解決方法使用浮動float left right 使用浮...

清除浮動的6中方法

額外標籤法 使用 after 偽元素 給父元素定高 利用overflow hidden 屬性 父元素浮動 父元素處於絕對定位 在開發網頁的時候經常需要用到各種浮動,此時便需要及時的清除浮動,否則將會導致布局出現問題 引出問題 title outer inner footer style head d...

CSS清除浮動的4中方法

清除浮動 這個問題,做前端的應該再熟悉不過了,咱是個新人,所以還是記個筆記,做個積累,努力學習向大神靠近。css清除浮動 的方法網上一搜,大概有n多種,用過幾種,說下個人感受。1 結尾處加空div標籤 clear both1 2 3 4 div1 left right clear 這種方法,感覺之前...