css - 嵌套文章 "spill over"节

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

那是因为当你 float <article>元素，它们被从文档流中取出。父级将没有“内部高度”可供引用，因此它的高度将崩溃。要解决此问题，请使用 clearfix 方法^{[ 1 , 2 , 3 , 4 ]} 或简单地声明 overflow: hidden在 parent 身上 :)

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

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

p/s:这与您的问题没有严格的关系，尽管它涉及您的代码:如果您想平均填充父级的宽度，您可以在子级上使用 33.333% 宽度并使用 border-box box-sizing 以确保分配的宽度将包括指定的所有边框和填充:)

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/