html 内部浮动外部不,CSS：外部层高度自适应内部浮动层高度的方法
為了節(jié)省時間，根據(jù)個人測試在浮動層的外部層里加入overflow:auto;zoom:1;?即可適應(yīng)內(nèi)部浮動層的高度，似乎沒有以下說的那么復(fù)雜，這樣做發(fā)現(xiàn)問題或有更好提議的同學(xué)，歡迎留言討論。
以下為轉(zhuǎn)載文章
----------------------------------------------------------------------------------------------------------------------
先看一個例子：
HTML:
復(fù)制代碼代碼如下:
CSS:
復(fù)制代碼代碼如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
在各個瀏覽器中的效果一致：
可以看到，外面 ul 即藍(lán)色的區(qū)域高度為0，如果沒有設(shè)置 padding，這個 ul
是看不到的。當(dāng)然要讓它伸長也很簡單，只需要在最后一個 li
后面加一個標(biāo)簽清除下浮動就可以了。不過這樣的話就改變了HTML結(jié)構(gòu)，不好。現(xiàn)在這里要討論的就是如何在不改變結(jié)構(gòu)的情況下讓 ul
自動伸長。
注意：自動伸長針對的是包含浮動元素的元素(這里是 ul)。而不是浮動元素自身(li)。
第一種方法：
IE 支持一個 CSS 屬性 zoom，
這個元素接受一個數(shù)字或一個百分?jǐn)?shù)，表示這個元素放大(縮小)的比例。例如：zoom:0.5或zoom:50%
表示縮小一半，而zoom:2或zoom:200%則表示放大一倍。
當(dāng)定義了這個屬性之后在 IE 瀏覽器里面就會自動適應(yīng)高度了。當(dāng)應(yīng)用了這個屬性之后，IE
就會自動伸長了。一般情況下我們不需要放大或縮小，所以定義 zoom:1 就行了?，F(xiàn)在的 CSS：
復(fù)制代碼代碼如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;
}
而非 IE 瀏覽器不支持這個屬性。所以第一種方法需把瀏覽器分為兩個陣營：IE 和 非IE。
對于非 IE 瀏覽器需要用到一個偽類 :after (IE 瀏覽器不支持)。CSS 代碼如下：
復(fù)制代碼代碼如下:
ul:after {
content:".";
display:block;
clear:both;
height:0;
}
:after 偽類用于向元素后面插入一段內(nèi)容，即 content 屬性。然后在這個插入的內(nèi)容里清除浮動，我們可以想象成在最后一個
后面插入了一個.里面的內(nèi)容是一個”.”，然后設(shè)置display:block;
clear:both; height:0; 等屬性 (這個比喻不一定準(zhǔn)確)。
我們看下在 Firefox 下面的效果：
可以看到 ul 已經(jīng)自動伸長了，但下面有個小小的黑點。相信你已經(jīng)猜到了，這個黑點對應(yīng)的就是 content:”.”
。
這個黑點肯定是要去掉的啦，我們可以用 font-size:0;line-height:0; 將其去掉。
好了，現(xiàn)在在兩個陣營的瀏覽器里都實現(xiàn)目標(biāo)了。以下是 ul 所有的CSS代碼：
復(fù)制代碼代碼如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;
}
ul:after {
content:".";
display:block;
clear:both;
height:0;
font-size:0;
line-height:0;
}
第二種方法
我剛說過不止一種方法可以解決，那現(xiàn)在就來說說第二種方法。第二種方法還要更簡單一些。同樣，需要將瀏覽器分成兩個陣營。不過和上一個有所不同，這一次
IE7 站到了另外一個陣營。即 IE7, Firefox, Opera, Safari
等(這里暫時稱為A瀏覽器)。對于這些瀏覽器，只要定義一個 overflow:auto; 即可，但是對于 IE6 和 IE5
(稱為B瀏覽器)卻不起作用。不過要 IE6，IE5 聽話也很簡單。只要定義一個高度即可，哪怕是 0
，也會自動伸長。知道這些還沒用，我們還得區(qū)分這兩個陣營的瀏覽器才行。怎么區(qū)分呢？
A 瀏覽器支持屬性選擇符，而B瀏覽器不支持。
所以以下代碼只有A瀏覽器才會執(zhí)行。
復(fù)制代碼代碼如下:
[xmlns] ul {
overflow:auto;
}
需要注意的是HTML 必須要有< !DOCTYPE
>頭部以及有xmlns屬性才會起作用。不過這個問題似乎不大，現(xiàn)在絕大部分網(wǎng)頁都有這兩個東東，包括
Dreamweaver 默認(rèn)新建的網(wǎng)頁都會自動加上。
而對于B瀏覽器則可以通過以下方式：
復(fù)制代碼代碼如下:
* html ul {
height:1%;
}
其實 height 完全可以寫成 0，為什么要寫1%呢？告訴你其實我也不知道，大家都這么寫。
好了，第二種方法的 ul 全部樣式代碼如下：
復(fù)制代碼代碼如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
[xmlns] ul {
overflow:auto;
}
* html ul {
height:1%;
}
現(xiàn)在既然有兩種方法，那么那一種更好呢？我個人比較喜歡第二種方法。原因很簡單，代碼更少，而且是符合標(biāo)準(zhǔn)的。只是在極少數(shù)情況下會出現(xiàn)滾動條，所以應(yīng)該這兩種方法配合使用。
還有，這些代碼是可以通用的，可以提取為一個類比如 .clearfix 。這個任務(wù)就交給你自己完成吧。
總結(jié)
以上是生活随笔為你收集整理的html 内部浮动外部不,CSS：外部层高度自适应内部浮动层高度的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android编程用真机模拟,andro
- 下一篇： html自定义radio样式,用纯CSS