CSS Float不能擴展Div高度

我在使用HTML/CSS和Floats時遇到了很長時間的這個問題。CSS Float不能擴展Div高度

在圖像中，您可以看到我有一個左側浮動的Box Div，因爲有很多這些Boxes。箱內我有一個<UL>列表。列表項目<li>也向左浮動。

正如您在圖像中看到的那樣，List項目不會生成它們位於Expand中的Box Div。我嘗試了幾件沒有太多好運的東西，希望有更多經驗的人可以幫忙？我不能在Box Div上設置固定的高度，因爲圖標的數量總是不同的，需要擴展才能修復它們。

enter image description here

現場演示：http://jsfiddle.net/jasondavis/u5HXu/

<div class="module-box"> 
    <div class="module-box-title"> 
     <h4><i class="icon-cogs"></i>Admin Settings</h4> 
     <div class="tools"> 
      <a href="#" class="collapse">-</a> 
     </div> 
    </div> 
    <div class="module-box-body" style="display: block;"> 


     <ul> 
      <li> 
       <a href="#"> 
        <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0"> 
        <span class="module-icon password_assistant"></span> 
       </a><br> 
       <a href="#">Change<br>Password</a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0"> 
        <span class="module-icon password_assistant"></span> 
       </a><br> 
       <a href="#">Change<br>Password</a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0"> 
        <span class="module-icon password_assistant"></span> 
       </a><br> 
       <a href="#">Change<br>Password</a> 
      </li> 
     </ul> 


    </div> 
</div>

CSS

/* Modules homepage */ 
.module-box { 
    margin: 0px 0px 25px 25px; 
    padding: 0px; 
    float: left; 
    width: 464px; 
} 

.module-box-title { 
    margin-bottom: 0px; 
    padding: 8px 10px 2px 10px; 
    border-bottom: 1px solid #eee; 
    color: #fff !important; 
    background-color: #333; 
    height: 51px; 
    line-height: 45px; 
    border-radius: 3px 3px 0 0; 
} 

.module-box-title h4 { 
    display: inline-block; 
    font-size: 18px; 
    font-weight: 400; 
    margin: 0; 
    padding: 0; 
    margin-bottom: 7px; 
} 

.module-box-title .tools { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
    margin-top: 6px; 
    float: right; 
} 
.module-box-title .tools a { 
    font-size: 31px; 
    color: #fff; 
    text-decoration: none; 
    line-height: 29px; 
} 

.module-box-body { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-top: 0; 
    padding: 10px; 
    clear: both; 
} 

.module-box-body a { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 11px; 
    color: #888; 
    text-decoration: none; 
} 

.module-box-body li { 
    float: left; 
    margin: 0 12px 0 0; 
    list-style: none; 
}

來源

2013-02-27 JasonDavis

您需要明確使用clearfix或清除元素的花車。

方法＃1 clearfix

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    *zoom: 1; 
}

然後添加包含元素

<div class="module-box-body clearfix" style="display: block;">

http://jsfiddle.net/u5HXu/8/

方法＃2清除元件

的類

.clear { 
    clear: both; 
}

然後，在浮動元素後添加以下HTML。

<div class="clear"></div>

http://jsfiddle.net/u5HXu/9/

來源

2013-02-27 21:41:48 Jrod

**注意：**方法＃2具有更多的跨瀏覽器兼容性（舊版本），但也不太理想，因爲它添加的HTML沒有任何語義用處。 – animuson 2013-02-27 21:49:56

方法＃1已知支持：Firefox 3。5+，Safari 4+，Chrome，Opera 9+，IE 6+ http://nicolas.gallagher.com/micro-clearfix-hack/ – Jrod 2013-02-27 22:34:51

嘗試應用overflow:auto的容器，你要根據其內容（浮動項）的高度來調整其高度的一個。

我想添加一個jsfiddle鏈接，但它最近並沒有爲我工作。：/

來源

2013-02-27 21:41:58 Madbreaks

您可以使用父容器（..module-box-body）;）上的overflow: hidden技巧修復所有內容。

http://jsfiddle.net/teddyrised/ct6gr/

來源

2013-02-27 21:42:35 Terry

謝謝 - 爲什麼這個工作？ – 2014-08-12 11:32:17

@wrongstars很難用通俗的術語來解釋它，但基本上使用'overflow：hidden'建立一個新的塊流上下文，它強制父容器「識別」並完全隔離內部浮動元素。 http://stackoverflow.com/questions/3400749/how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem – Terry 2014-08-12 12:18:52

@Terry，夥計，這正是我所期待的，可笑的是，這個答案是多麼簡單，以解決手頭的問題。你是魔術師嗎？ – Dan 2015-03-03 22:29:07

更改.module-box-body li到

.module-box-body li { 
    display: inline-block; 
    margin: 0 12px 0; 
    list-style: none; 
}

更新fiddle。

來源

2013-02-27 21:44:05 hjpotter92

CSS Float不能擴展Div高度

回答

相關問題