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]}或简单地声明overflow: hidden父母:)

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

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

p / s：这与你的问题没有严格的关系，虽然它与你的代码有关：如果你想平均填充父母的宽度，你可以在孩子身上使用33.333％的宽度并使用{{1} } box-sizing以确保指定的宽度将包括指定的所有边框和填充:)

border-box

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

嵌套文章＆＃34;溢出＆＃34;这部分

1 个答案: