html - float 问题 : content jumping out of parent div

Question

我知道如果我 float 一个元素，如果它们自己没有设置 float 或至少清除 float ，则后续元素最终会消失在该元素后面。就像本例中的 »box three« 一样。但是为什么第三个框的内容会跳出div呢？数字 3 或盒子的任何潜在内容不应该在内部»第三个盒子«吗？

http://jsfiddle.net/7vw4Leg5/

<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>

.box {
    text-align: center;
    font-size: 30px;
    color: red;
    margin: 5px;
    width: 200px;
    height: 100px;
    background: grey;
}
.two {
    border: 2px solid red;
    float: left;
    opacity: 0.66;
}
.three {
    opacity: 0.33
}

*编辑:

这里是另一个例子来解释我不明白的问题。 为什么二号不在蓝色框内？ @Terry:好的，如果我减小第一个框的宽度，内容会跳上一行并进入 div。但为什么它一开始就不存在呢？盒子是空的，空间不够用吗？

http://jsfiddle.net/utsc84pq/

<div class="box one">1</div>
<div class="box two">2</div>

.box {
    font-size: 40px;
    margin: 5px;
    width: 300px;
    height: 150px;
}
.one{
    float: left;
    border: 5px solid rgba(255, 154, 188, 0.9);
    background-color: rgba(255, 165, 0, 0.25);
}
.two {
    position: relative;
    top: 170px;
    border: 5px solid rgba(35, 154, 255, 0.5);
    background-color: rgba(100, 165, 255, 0.25);
}

Answer 1

试试这个。

.box {
    text-align: center;
    font-size: 30px;
    display:block;
    color: red;
    margin: 5px;
    width: 200px;
    height: 100px;
    line-height:100px;
    background: grey;
}

.one{
    border:1px solid green;
    display:block;
    
}
.two {
    
    border: 1px solid red;
    opacity: 0.66;
}
.three {
 border: 1px solid yellow;
    opacity: 0.66;
}

<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>