位置絕對格破

Question

我有這樣一個div：

<div class="main"> 
    <div class="container_1">A</div> 
    <div class="container_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat diam non neque imperdiet cursus ut ut erat. Sed pellentesque congue justo, sed auctor velit posuere ac.></div>  
</div> 

而且我的CSS是這樣的：

.main div 
{ 
    float:left; 
} 

.main .container_2 
{ 
    width:500px; 
} 

.main .container_1 
{ 
    width:40px; 
} 

.main 
{ 
    position:absolute;  
    padding:5px; 
    color:#fff; 
    background-color:#365; 
} 

我的問題是，當我不上使用position:absolute;我main div，一切都壞了（你可以查看jsfiddle上的例子，只有當我在主div上使用絕對位置時，一切都可以正常工作，但我不想使用絕對位置，因爲我想讓主div預先保存它的空間有任何幫助嗎？

謝謝

Answer 1

您可以浮在主股利或給它display:inline-block採取了流動兒童的完整尺寸，除非你想在標記只是容器div的閉幕前後添加<div style="clear:both;float:none;"></div>最後的浮動元素。

.main 
{ 

    display:inline-block; 
    padding:5px; 
    color:#fff; 
    background-color:#365; 
} 

Fiddle

All About Floats

Answer 2

可以使.main DIV有overflow: auto承擔其浮動子的高度。

.main 
{ 
    overflow: auto;  
    padding:5px; 
    color:#fff; 
    background-color:#365; 
} 

Answer 3

由於main孩子們浮動必須添加overflow: hidden在main或添加其他div爲：代替

<div style="clear: both;float:none;"></div> 

Answer 4

使用

overflow:auto 

position:absolute; 

上。主要

jsfiddle

Answer 5

您需要使用clear只要你有浮動元素，以確保母公司覆蓋他們所有的內容，我喜歡用CSS :after這個

.main:after{ 
    content: ''; 
    display: block; 
    clear: both; 
} 

Answer 6

發生的事情是你的容器不漂浮，所以由於漂浮物的怪異不完全包含浮動的內部物品。

補充說：

.main{ 
    float: left; 
} 

解決了這個問題。

Answer 7

我儘量避免絕對定位，不惜一切代價。如果我發現自己絕對定位了一些東西，只是爲了讓它展示我通常在別處尋找問題的「正確」方式。

對於我來說，當我想讓元素變得粘滯時，絕對定位被保存起來，比如頂部導航欄，底部頁腳或者沿着這些線條的東西。

最喜歡這裏說過。浮動主分區。應該有助於緩解一些頭痛問題。

我清理一些東西放在那裏，並且更新：http://jsfiddle.net/s58TF/

.main_2{ 
padding:5px; 
color:#fff; 
background-color:#365; 
float:left; 

}

Answer 8

您可以使用：

.main { 
    overflow: hidden; 
} 

- 或 -

的clearfix方法（如果因爲其他原因不想使用「overflow：hidden」）：http://css-tricks.com/snippets/css/clear-fix/

這一件作品，通常是：

.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

只是添加類「小組」，「主」分區，或替換「組」，「主」。這裏的clearfix方法和應用工作：http://jsfiddle.net/ksyFG/

---

需要明確的是，這是兩個不同的解決方案：「溢出：隱藏」或clearfix。