html - 将 div 放在 div 中//使用灵活的 div 宽度//边距不起作用

Question

我正在尝试将一些 div 放在一个 div 中，其中最后一个 div 具有用于使其以某种方式灵活占用剩余空间的溢出参数。 jsfiddle展示示例。

HTML代码:

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</div>

CSS 代码:

.container {
    width: 400px;
    height: auto;
    border: 1px solid red;
    margin: 0 auto;
}

.box1 {
    width: 50px;
    height: 100px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(227, 227, 227);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box2 {
    width: 100px;
    height: 50px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(191, 239, 255);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box3 {
    width: 70px;
    height: 30px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(238, 212, 232);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box4 {
    width: 30px;
    height: 100px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(235, 252 ,212);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box5 {
    height: 70px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(255, 173, 187);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    overflow: hidden;
}

现在我有两个问题:

1. 为什么容器 div 不(在视觉上)包含所有 div 而只包含最后一个 (box5) 以及如何修复它？
2. 为什么最后一个 div(带溢出)不使用 margin 参数？可以看到fiddle左边的margin只有4px，一共是8px。

Answer 1

添加到 .container overflow:hidden

.container {
宽度:400px；
高度:自动；
边框:1px 纯红色；
margin : 0 auto ；
溢出:隐藏
}