CSS：浮動的div有0高度

我試圖通過側2的div側放置另一div中，這樣我可以有文字的2列和外層div繪製邊框兩者：CSS：浮動的div有0高度

HTML

<div id="outer"> 
    <div id="left"> 
     ... 
    <div id="right"> 
</div>

CSS

#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
} 

#left{ 
    float:left; 
} 

#right{ 
    width:500px; 
    float:right; 
}

然而，外層div登記的0像素的高度，因此邊框沒有周圍的其他的div去。我如何讓外部的div認識它內部的事物的高度？

來源

2012-01-26 ario

https://www.google.com/search?gcx=w&sourceid=chrome&ie=UTF-8&q=containing高度+浮動 –

這是我在谷歌找到的第二個結果。 –

這不是因爲浮動div沒有高度，這是因爲浮動div不會影響父元素的大小。

可以使用overflow風格，使父元素採取浮動元素考慮：

#outer { overflow: auto; }

來源

2012-01-26 20:06:26 Guffa

+1用於解釋爲什麼發生這種情況。爲了獲得技術上的原因，這會導致外部元素[爲其浮點數建立新的塊格式上下文]（http://www.w3.org/TR/CSS2/visuren.html#block-formatting），因此它能夠擴展遏制他們。 – BoltClock

@airo：你可以嘗試'overflow：hidden;'來代替。只要沒有爲周圍元素定義高度，通常使用哪種溢出模式並不重要，但根據渲染模式和周圍元素，某些瀏覽器可能會在某些情況下發揮作用。 – Guffa

哇這實際上工作！（我甚至不知道爲什麼這是可行的，因爲'overflow'的默認值已經是'auto'，並且你只是重新設置它......） –

您可以通過在應用了clear屬性的浮動元素之後插入一個元素來清除浮動元素，因爲浮動的子元素會導致父元素的高度爲0，因爲它們沒有考慮浮動子元素的高度。

<div id="outer"> 
    <div id="left"> 
     ... 
    <div id="right"> 
    <div class="clear"></div> 
</div> 

#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
} 

#left{ 
    float:left; 
} 

#right{ 
    width:500px; 
    float:right; 
} 
.clear{ clear: both; }

來源

2012-01-26 20:05:06

不，他不需要*。有不止一種方法去皮膚... – Guffa

Guffa，同意，重新編寫。 –

試試這個：

<div id="outer"> 
    <div id="left"> 
     ... 
    <div id="right"> 
    <div style="clear:both"></div> 
</div>

來源

2012-01-26 20:05:09 xbonez

添加溢出：隱藏;到主要的分區。

<style type="text/css"> 
#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
overflow: hidden; 
border: 1px solid green; 
} 

#left{ 
    float:left; 
border: 1px solid red; 
} 

#right{ 
    width:500px; 
    float:right; 
border: 1px solid yellow; 
} 
</style>

來源

2012-01-26 20:05:20 Brian

有幾個解決方案，這一問題：

#outer: overflow: hidden;

或添加一些非顯示的內容到浮動的div後到來的外層div，你再添加一個明確的：時尚風格規則。

您還可以添加through css：在僞元素之後插入內容，然後您將這些div應用爲clear：兩者都是 - 這樣做的優點是不需要額外的標記。

我的首選是第一個。

來源

2012-01-26 20:05:32 kinakuta

用於提及僞元素的使用。 – iurii

還必須上浮外格。包含floatet div並且沒有浮動的Div的崩潰。

#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
    float:left; 
} 

#left{ 
    float:left; 
    width:300px; 
} 

#right{ 
    width:500px; 
    float:right; 
}

來源

2012-01-26 20:06:40

如何回合是這樣的：

<style type="text/css"> 
#outer{ 
    background-color:rgba(255,255,255,.5); 
    width:800px; 
    border:thin solid #000000; 
    height:300px; 
    margin:5px; 
    padding:10px; 
} 

#left{ 
    float:left; 
    border:thin dashed #000000; 
    width:385px; 
    height:100px; 
    margin:5px; 
} 

#right{ 
    width:385px; 
    float:left; 
    border:thin dashed #000000; 
    height:100px; 
    margin:5px; 
} 
</style> 

<div id="outer"> 
    <div id="left"> 
    </div> 
     ... 
    <div id="right"> 
</div> 
</div>

來源

2012-01-26 20:15:24 jamesTheProgrammer

如果父母中的div浮動是父母的div不再一部分：通過檢查父element.no解決您的問題有兩個檢查方法： 1）使空div在父類中結束它作爲.blank所有下面的CSS

.blank:after{ 
     content: ""; 
     clear:both; 
     display:block; 
    }

或者 2）給父類。明確的修復，並添加CSS

.clearfix:after { 
content: ""; 
clear: both; 
display: block;

} 它會給父等於內容

來源

2017-11-18 10:20:09

CSS：浮動的div有0高度

回答

相關問題