嵌套文章「溢出」部分

Question

我嘗試將3個錶帶嵌入到一個節中。它們爲什麼會溢出該部分的邊界？

的CSS：

article{ 
border-right:solid 1px grey; 
height:50%; 
width:30%; 
float:left; 
padding:0.5%; 
text-align:center; 
} 

section{ 
border:dotted 1px blue; 
margin-top:10px; 
margin-bottom:40px; 
} 

的HTML：

<section> 
    <h1>Schedule</h1> 
    <article><h3>Thursday</h3>und so weiter und so fort</article> 
    <article><h3>Friday</h3>so hübsch und so</article> 
    <article><h3>Saturday</h3>das geht aber ab hier</article> 
</section> 

Answer 1

這是因爲當你漂浮在<article>元素，它們被取出公文流轉。父母沒有「內身高度」來指稱，因此其高度將會崩潰。爲了解決這一點，使用clearfix方法^{[1，2，3，4]}或簡單地對父:)

section{ 
    border:dotted 1px blue; 
    margin-top:10px; 
    margin-bottom:40px; 
    overflow: hidden; 
} 

http://jsfiddle.net/teddyrised/gx5tehrn/

P/S聲明overflow: hidden：這不是嚴格相關你的問題，雖然它涉及到你的代碼：如果你想要平均填充父母的寬度，你可以使用33.333％的寬度，並使用border-box框尺寸來確保指定的寬度將包括指定的所有邊框和填充:)

article{ 
    box-sizing: border-box;  // Added this 
    border-right:solid 1px grey; 
    height:50%; 
    width:33.333%;    // Changed this 
    float:left; 
    padding:0.5%; 
    text-align:center; 
} 

section{ 
    border:dotted 1px blue; 
    margin-top:10px; 
    margin-bottom:40px; 
    overflow: hidden; 
} 

http://jsfiddle.net/teddyrised/yv8kvzcp/