CSS使用浮動時，背景消失：左

這是我的html：CSS使用浮動時，背景消失：左

<div class="header_wrapper"> 
     <div class="main_nav"> 
     <div>TEst</div> 
     <div>TEst</div> 
     <div>TEst</div> 
    </div> 
    <div class="clear"></div> 
</div>

正如你可以看到我想建立一個菜單，浮動的div。這樣main_nav的背景就消失了。

.header_wrapper{ 

    height:129px; 
    background:url('images/layout/header.png') no-repeat #1f1f1f; 
    border-bottom:1px solid #1f66ad 
} 

.header_wrapper .main_nav{ 
    position:relative; 
    top:77px; left:336px; 
    width:750px; 
    background:red; 
} 

.header_wrapper .main_nav div{ 
    float:left; 
} 

.clear{ 
    clear:both; 
}

我試圖使用清除：但是，背景仍然消失。任何想法爲什麼？

來源

2012-03-02 Lost in OWL

您是否嘗試分配高度？ – 2012-03-02 18:11:38

向main_nav添加overflow:auto;將背景帶回。

來源

2012-03-02 18:11:09 j08691

使用_overflow：auto; _可能會導致某些瀏覽器出現問題，例如滾動條可能會出現/消失，或者我切斷的內容區域 – coderVishal 2015-07-04 10:28:06

你必須clear到你的float DIV'的父母是.main_nav。像這樣寫：

.header_wrapper .main_nav{ 
    overflow:hidden; 
}

來源

2012-03-02 18:11:35 sandeep

把overflow上.main_nav

.header_wrapper .main_nav div{ 
    float:left; 
    overflow: hidden; 
}

你清除div迫使其父擴大，它有它的兄弟姐妹的背景沒有影響。

來源

2012-03-02 18:12:33 Sparky

這是因爲浮動內容不佔用任何空間。您的父母main_div師基本上佔據0的高度，因爲它沒有其他內容，「隱藏」背景（沒有高度顯示在後面）。

此信息在css-floating tag wiki中可用，我也發佈了其他more detailed information about floating and parent containers。

來源

2012-03-02 18:14:31 animuson

他說_ _「main_nav'的背景消失了_，而不是'header_wrapper'的背景。他的'header_wrapper'不應該被摺疊，因爲他包含了一個清除'div'。 – Sparky 2012-03-02 18:17:03

@ Sparky672：謝謝，只是在我的文章中更改div的名稱... – animuson 2012-03-02 18:19:05

而且它不是父母。 – Sparky 2012-03-02 18:26:35

CSS使用浮動時，背景消失：左

回答

相關問題