歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
  高度塌陷的觸發條件:父元素沒有設置高度,且所有的子元素都浮動之后,因為子元素懸空不占位的,所以父元素的高度為0,會影響到后面的標簽,也會影響頁面布局。高度塌陷的解決方法有很多種,以下是跟大家整理的8中解決方法,以及優缺點,有需要的自取。
 
  1.父級div定義 height
 
  <style type="text/css">
 
  .div1{background:#000080;border:1px solid red;/*解決代碼*/height:200px;}
 
  .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
 
  .left{float:left;width:20%;height:200px;background:#DDD}
 
  .right{float:right;width:30%;height:80px;background:#DDD}
 
  </style>
 
  ?
 
  <div class="div1">
 
  <div class="left">Left</div>
 
  <div class="right">Right</div>
 
  </div>
 
  <div class="div2">
 
  div2
 
  </div>
 
  原理:父級div手動定義height,就解決了父級div無法自動獲取到高度的問題。
 
  優點:簡單、代碼少、容易掌握
 
  缺點:只適合高度固定的布局,要給出精確的高度,如果高度和父級div不一樣時,會產生問題
 
  建議:不推薦使用,只建議高度固定的布局時使用
 
  2.結尾處加空div標簽 clear:both;
 
  <style type="text/css">
 
  .div1{background:#000080;border:1px solid red}
 
  .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
 
  .left{float:left;width:20%;height:200px;background:#DDD}
 
  .right{float:right;width:30%;height:80px;background:#DDD}
 
  /*清除浮動代碼*/
 
  .clearfloat{clear:both;height:0;overflow:hidden;}
 
  </style>
 
  <div class="div1">
 
  <div class="left">Left</div>
 
  <div class="right">Right</div>
 
  <div class="clearfloat"></div>
 
  </div>
 
  <div class="div2">
 
  div2
 
  </div>
 
  原理:添加一個空div,利用css提高的clear:both清除浮動,讓父級div能自動獲取到高度
 
  優點:簡單、代碼少、瀏覽器支持好、不容易出現怪問題
 
  缺點:不少初學者不理解原理;如果頁面浮動布局多,就要增加很多空div,讓人感覺很不好
 
  建議:不推薦使用,但此方法是以前主要使用的一種清除浮動方法
 
  3.父級div定義 偽對象:after 和 zoom
 
  <style type="text/css">
 
  .div1{background:#000080;border:1px solid red;}
 
  .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
 
  .left{float:left;width:20%;height:200px;background:#DDD}
 
  .right{float:right;width:30%;height:80px;background:#DDD}
 
  /*清除浮動代碼*/
 
  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;overflow:hidden;}
 
  .clearfloat{zoom:1}
 
  </style>
 
  <div class="div1 clearfloat">
 
  <div class="left">Left</div>
 
  <div class="right">Right</div>
 
  </div>
 
  <div class="div2">
 
  div2
 
  </div>
 
  原理:IE8以上和非IE瀏覽器才支持:after,原理和方法2有點類似,zoom(IE轉有屬性)可解決ie6,ie7浮動問題
 
  優點:瀏覽器支持好、不容易出現怪問題(目前:大型網站都有使用,如:騰迅,網易,新浪等等)
 
  缺點:代碼多、不少初學者不理解原理,要兩句代碼結合使用才能讓主流瀏覽器都支持。
 
  建議:推薦使用,建議定義公共類,以減少CSS代碼。
 
  4.父級div定義 overflow:hidden
 
  <style type="text/css">
 
  .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:hidden}
 
  .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
 
  .left{float:left;width:20%;height:200px;background:#DDD}
 
  .right{float:right;width:30%;height:80px;background:#DDD}
 
  </style>
 
  <div class="div1">
 
  <div class="left">Left</div>
 
  <div class="right">Right</div>
 
  </div>
 
  <div class="div2">
 
  div2
 
  </div>
 
  原理:必須定義width或zoom:1,同時不能定義height,使用overflow:hidden時,瀏覽器會自動檢查浮動區域的高度
 
  優點:簡單、代碼少、瀏覽器支持好
 
  缺點:不能和position配合使用,因為超出的尺寸的會被隱藏。
 
  建議:只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
 
  5.父級div定義 overflow:auto
 
  <style type="text/css">
 
  .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:auto}
 
  .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
 
  .left{float:left;width:20%;height:200px;background:#DDD}
 
  .right{float:right;width:30%;height:80px;background:#DDD}
 
  </style>
 
  <div class="div1">
 
  <div class="left">Left</div>
 
  <div class="right">Right</div>
 
  </div>
 
  <div class="div2">
 
  div2
 
  </div>
 
  原理:必須定義width或zoom:1,同時不能定義height,使用overflow:auto時,瀏覽器會自動檢查浮動區域的高度
 
  優點:簡單、代碼少、瀏覽器支持好
 
  缺點:內部寬高超過父級div時,會出現滾動條。
 
  建議:不推薦使用,如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
 
  6.父級div 也一起浮動
 
  <style type="text/css">
 
  .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;margin-bottom:10px;float:left}
 
  .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解決代碼*/clear:both}
 
  .left{float:left;width:20%;height:200px;background:#DDD}
 
  .right{float:right;width:30%;height:80px;background:#DDD}
 
  </style>
 
  <div class="div1">
 
  <div class="left">Left</div>
 
  <div class="right">Right</div>
 
  </div>
 
  <div class="div2">
 
  div2
 
  </div>
 
  原理:所有代碼一起浮動,就變成了一個整體
 
  優點:沒有優點
 
  缺點:會產生新的浮動問題。
 
  建議:不推薦使用,只作了解。
 
  7.父級div定義 display:table
 
  <style type="text/css">
 
  .div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;display:table;margin-bottom:10px;}
 
  .div2{background:#800080;border:1px solid red;height:100px;width:98%;}
 
  .left{float:left;width:20%;height:200px;background:#DDD}
 
  .right{float:right;width:30%;height:80px;background:#DDD}
 
  </style>
 
  <div class="div1">
 
  <div class="left">Left</div>
 
  <div class="right">Right</div>
 
  </div>
 
  <div class="div2">
 
  div2
 
  </div>
 
  原理:將div屬性變成表格
 
  優點:沒有優點
 
  缺點:會產生新的未知問題。
 
  建議:不推薦使用,只作了解。
 
  8.結尾處加 br標簽 clear:both
 
  <style type="text/css">
 
  .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
 
  .div2{background:#800080;border:1px solid red;height:100px}
 
  .left{float:left;width:20%;height:200px;background:#DDD}
 
  .right{float:right;width:30%;height:80px;background:#DDD}
 
  .clearfloat{clear:both}
 
  </style>
 
  <div class="div1">
 
  <div class="left">Left</div>
 
  <div class="right">Right</div>
 
  </div>
 
  <div class="div2">
 
  div2
 
  </div>
 
  原理:父級div定義zoom:1來解決IE浮動問題,結尾處加 br標簽 clear:both
 
  建議:不推薦使用,只作了解。

如需轉載,請注明文章出處和來源網址:http://www.rs2pl.com/html/h62941.shtml

久久天天躁狠狠躁夜夜躁2020