關於網頁不相容亂板的清除浮動

2022-07-17 02:24:11 字數 948 閱讀 6988

今天做**,在360和谷歌都挺好,但是在firefox卻出現亂板,footer跟上個div錯位了,footer上去了,其實footerdiv 上加上clear:both就行了,清除他兩邊的浮動,轉乙個別人的

在開發中,從美工mm給你html**中,肯定能經常看」

」這樣的**,但是你真的能明白它是做什麼用的嗎?

如:test div

div>

你可以將此部分**放到乙個html頁面看看效果,然後在去掉」

」看一下效果,就知道這句話的作用了。

如圖:(1)有clear:both的:

(2)無clear:both的

這樣看,應該就一目了然了:原來後邊的clear:both;其實就是利用清除浮動來把外層的div撐開,所以有時候,我們在將內部div都設定成浮動之後,就會發現,外層div的背景沒有顯示,原因就是外層的div沒有撐開,太小,所以能看到的背景僅限於一條線。

但這種辦法就是最好了的嗎?

我這麼說,當然答案就不是了。可以採用通過hack實現:

.clearfix:after

* html .clearfix

*:first-child + html .clearfix

style>

test div

div>

看完解決辦法,咱們來看裡邊的原理:

(1)、首先是利用:after這個偽類來相容ff、chrome等支援標準的瀏覽器。

:after偽類ie不支援,它用來和content屬性一起使用設定在物件後的內容,例如:

a:after

這個css將會讓a標籤內的文字後邊加上link文字文字。

(2)、利用「* html」這個只有ie6認識的選擇符,設定縮放屬性「zoom: 1;」實現相容ie6。

(3)、利用「*:first-child + html」這個只有ie7認識的選擇符,設定縮放屬性「zoom: 1;」實現相容ie7。

CSS中關於清除浮動的問題

1.採用 after的方法清除浮動 優點 避免在html裡插入多餘的標籤 詳情 整理成乙個通用的.clearfix clearfix after content 的作用是在清除元素的內容後邊新增乙個 點 當然新增其他也可以,只是 點 簡單。display block之所以設成block,是為了後面c...

關於清除浮動的幾種方法

最簡單的一種情形就是我們把乙個小的 固定寬度的div元素 比如導航 引用等 和其他元素內容一起包含在乙個大的div中。比如下面這段 outer inner lorem ipsum 我們可以為 inner 設定乙個寬度值 比如說20 但是由於div是塊級元素,即使我們設定了寬度,其後面的內容也只能在下...

關於清除浮動 css定位的學習

浮動及清除浮動 浮動最初的目的 實現文字環繞 浮動具有破壞性,會破壞父元素高度 類似的還有 display none position absolute fixed sticky 浮動適合流體布局 mib head a 下面這個是固定布局寫法 mib feed fixed 下面這個是流體布局寫法 m...