css float之後父級div高度自動失效辦法

來源:互聯網
上載者:User

因為如果內部元素一旦進行了float,這個元素就脫離的文普通的文檔流了,所以對於其父級來說他是不存在的,所以自然撐不開了,解決辦法2中:

1、父級元素加上 overflow:hidden

 代碼如下 複製代碼
<div style="overflow:hidden;">
 <div style="display:inline;float:left;width:274px;">
  ...
 </div>
 <div style="display:inline;float:right;width:274px;">
  ...
 </div>
</div>

      以上方式對ie6無效,這時需要在父div的尾部,再加一個隱藏的元素把父div撐開:

 代碼如下 複製代碼
<div class="m-box view-info" style="overflow:hidden;">
 <div style="display:inline;float:left;width:274px;">
 
 </div>
 <div style="display:inline;float:right;width:274px;">
 
 </div>
        <div style="display: block;height: 0px;clear: both;visibility: hidden;"></div>
</div>

2、在父級元素結束標籤前加上

 代碼如下 複製代碼

<div style=”clear:both”></div>

<div style="overflow:hidden;">
 <div style="float:left;">
  ...
 </div>
 <div style="float:right;">
  ...
 </div>
</div>

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.