CSS邊框沒有包裝整個div內容

Question

這是我的html代碼，它具有作爲主div的「box」，然後分別位於左側，中間和右側的三個div 。

<div id="box"> 
<div class="left">Left</div>  
<div class="middle">Middle</div> 
<div class="right">Right</div> 
</div> 

這是我的CSS代碼

#box { 
    width:90%; 
    height:auto; 
    border:5px solid green; 
} 
.left { 
    float:left; 
    width:30%; 
} 
.right { 
    float:right; 
    width:30%; 
} 
.middle { 
    float:left; 
    width:30%; 
} 

這是的jsfiddle鏈接：http://jsfiddle.net/hep9oLzn/ 邊框沒有包裝的內容。

Answer 1

發生這種情況是因爲漂浮的兒童元素。

All about floats - CSS-Tricks

你需要一個clearfix。

What is clearfix?

作爲示例這裏是一個微clearfix。 Micro Clearfix Hack。

#box { 
 
    width:90%; 
 
    height:auto; 
 
    border:5px solid green; 
 
    box-sizing: border-box; 
 
} 
 
.left { 
 
    float:left; 
 
    width:30%; 
 
} 
 
.right { 
 
    float:right; 
 
    width:30%; 
 
} 
 
.middle { 
 
    float:left; 
 
    width:30%; 
 
} 
 

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

 
.cf:after { 
 
    clear: both; 
 
} 
 
.cf { 
 
    *zoom: 1; 
 
}

<div id="box" class="cf"> 
 
    <div class="left">Left</div>  
 
    <div class="middle">Middle</div> 
 
    <div class="right">Right</div> 
 
</div>

Answer 2

您可以再補充的位置是：絕對的;到盒子。

Fiddle

#box { 
    width:90%; 
    height:auto; 
    position:absolute; 
    border:5px solid green; 
} 

Answer 3

只需添加浮動：左#box，

#box { 
 
    width:90%; 
 
    height:auto; 
 
    border:5px solid green; 
 
    float:left; 
 
}

Answer 4

您可以添加顯示：表;到#box

#box { 
    width:90%; 
    height:auto; 
    border:5px solid green; 
    display: table; 
} 

http://jsfiddle.net/bw0vhske/1/

約顯示錶中的一些信息： http://colintoh.com/blog/display-table-anti-hero

Answer 5

Demo

HTML代碼

<div id="box"> 
    <div class="left">Left</div>  
    <div class="middle">Middle</div> 
    <div class="right">Right</div> 
    <div class="clear"></div> 
</div> 

CSS代碼

#box { 
    width:90%; 
    height:auto; 
    border:5px solid green; 
} 
.left { 
    float:left; 
    width:30%; 
} 
.right { 
    float:right; 
    width:30%; 
} 
.middle { 
    float:left; 
    width:30%; 
} 
.clear{ 
    clear:both; 
} 
} 

Answer 6

您的div＃框只包含浮動元素，它們會從正常浮動狀態中移除。因此，您的div＃框沒有高度。有很多方法可以用來解決您的問題。

一個是爲你的div設置一個明確的高度。 例如：

#box { 
    width:90%; 
    height:600px; 
    border:5px solid green; 
    box-sizing: border-box; 
} 

您可以使用「clearfix」的解決方案，引導了其他的UI框架使用。 例如，添加此用css：

#box::after { 
    display: table; 
    clear: both; 
} 

您可以從裏面取出的div浮動屬性，使他們inline-block的。例如：

#box > div { 
    display: inline-block; 
    width: 30%; 
} 

您可以將浮動元素之後放置一個隱藏的對象，並用明確的：這兩個就可以了，如：

<div id="box" class="cf"> 
    <div class="left">Left</div>  
    <div class="middle">Middle</div> 
    <div class="right">Right</div> 
    <div class="fix"></div> 
</div> 

.fix { 
     clear: both; 
     visibility: hidden; 
    }