overflow:auto 的使用问题？

Question

效果图如下，为什么在.container的属性中 加入overflow: auto；整体的container容器就能把右边的头像框给包含进去了呢？

  <div class="container">
        <figure class="left">
            <figcaption>团队名称</figcaption>
            <img src="img/logo.jpg" alt="团队LOGO">
        </figure>
        <div class="right">
            <img src="img/logo1.jpg" alt="">
            <img src="img/logo2.jpg" alt="">
            <img src="img/logo3.jpg" alt="">
            <img src="img/logo4.jpg" alt="">
        </div>
        <div class="center">
            <p>重要说明</p>
            <p>百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。</p>

            <p>课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场</p>
            <p>任务描述</p>
            <p>使用 HTML 与 CSS 按照 示例图（点击查看） 实现三栏式布局。 左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理
            </p>
        </div>
    </div>

.container {
    background-color: #eee;
    border: 1px solid #999;
    padding: 20px;
    overflow: auto;
}

Answer 1

触发了BFC 希望能帮到你 http://www.html-js.com/articl...