CSS中浮動float 高度自適應

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

先來看一個樣本效果的對比：

這是清除浮動之前的效果。可以明顯看到column1,column2,column3這三個浮動元素的父級元素的高度並沒有被撐開。

這就是我們所要達到的效果，可通過下面的三種方法來實現。

方法一：
在浮動層最後一個浮動元素的後面多加一個元素來清除浮動即可，這是最簡單也是最直接的方法。唯一的缺點就是在一定程度上改變了文檔流結構。
html代碼：

代碼如下	複製代碼
<div id="demo"> <div id="c1" class="column">column1</div> <div id="c2" class="column">column2</div> <div id="c3" class="column">column3</div> <div class="clear"> </div>

css代碼：

代碼如下	複製代碼
#demo {border: 1px black dashed;} .column { float: left; padding: 10px 0; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;} .clear { clear:both;}

方法二：

此方法需要依賴於下面兩行文件類型的聲明:

代碼如下	複製代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

css代碼:

代碼如下	複製代碼
#demo {border: 1px black dashed;} .column { float: left; padding: 10px; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;} [xmlns] #demo {overflow:auto;} /* For IE7+ and non-IE / html #demo {height:1%; } /* IE only */

方法三：

非IE瀏覽器利用偽類 :after，IE瀏覽器利用其特有屬性zoom。
css代碼：

代碼如下	複製代碼
#demo {border: 1px black dashed; zoom: 1; /* IE only /} #demo:after { content: "."; display: block; clear: both; height: 0; font-size: 0; line-height: 0;} /IE8 and non-IE*/ .column { float: left; padding: 10px; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;}

overflow解決float浮動後高度自適應的問題

經發現可以採用overflow來解決！方法是在父元素加上如下代碼即可：
overflow:auto;zoom:1;

“overflow:auto;”是讓高度自適應，“zoom:1;”是為了相容IE6，也可以用“height:1%;”來解決。

完整的代碼如下：

代碼如下

複製代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float浮動之後的問題</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{padding:0;margin:0;}
body{font-size:12px;line-height:150%;}
ul{list-style:none;}
.container{width:700px;margin:0 auto;}
.header,.footer{height:60px;background:#99CC66;margin-bottom:6px;font-size:18px;font-weight:bold;}
.main{}
.left{float:left;width:200px;}
.sidepanel{border:1px solid #CC6600;margin-bottom:8px;}
.sidepanel h2{font-size:12px;background:#CC6600;height:24px;line-height:24px;text-indent:20px;color:#fff;}
.city{padding:6px 0px;overflow:auto;zoom:1;}
.city li{float:left;width:35px;text-align:center;}
.right{margin-left:200px;background:#CCCC66;height:240px;}
.hotinfo{padding:6px;}
.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}
</style>
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="main">
    <div class="left">
      <div class="sidepanel">
        <h2>城市導航</h2>
        <ul class="city">
          <li>北京</li>
          <li>上海</li>
          <li>天津</li>
          <li>南京</li>
          <li>廣州</li>
          <li>重慶</li>
          <li>濟南</li>
          <li>杭州</li>
          <li>鄭州</li>
          <li>北京</li>
          <li>上海</li>
          <li>天津</li>
          <li>南京</li>
          <li>廣州</li>
          <li>重慶</li>
          <li>濟南</li>
          <li>杭州</li>
          <li>鄭州</li>
        </ul>
      </div>
      <div class="sidepanel">
        <h2>熱門文章</h2>
        <ul class="hotinfo">
          <li>本月20日起入境須留指紋</li>
          <li>本月20日起入境須留指紋</li>
          <li>本月20日起入境須留<font color="#43FF73">指紋</font></li>
          <li>本月20日起入境須留指紋</li>
          <li>本月20日起入境須留指紋</li>
          <li>本月20日起入境須留指紋</li>
          <li>本月20日起入境須留指紋</li>
          <li>本月20日起入境須留指紋</li>
          <li>本月20日起入境須留指紋</li>
        </ul>
      </div>
    </div>
    <div class="right">右側內容</div>
</div>
<br class="clearfloat">
<div class="footer">footer</div>
</div>
</body>
</html>

執行個體參考 http://www.111cn.net/js_a/87/43100.htm

要注意以下幾點：

1、浮動元素會被自動化佈建成區塊層級元素，相當於給元素設定了display:block（區塊層級元素能設定寬和高，而行內元素則不可以）。
2、浮動元素後邊的非浮動元素顯示問題。
3、多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。
4、子項目全為浮動元素的元素高度自適應問題。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More