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