Float Issue: content jumping out of parent div - html

Question

I understand that if I float an element, following elements will eventually disappear behind that element if they do not have a float set themselves or at least clear the float. Just like it is happening with »box three« in this example. But why is the content of box three jumping out of the div? Isn't the Number 3 or any potential content of the box supposed to be inside »box three«?
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
}
*Edit:
Here another example to explain the issue I don't understand.
Why isn't the number two just inside the blue box? #Terry: Okay, if I reduce the first box' width, the content jumps up a line and enters the div. But why isn't it there in the first place? Isn't there enough space available as the box is completely empty?
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

Try this.
.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>

Answer 2

Yes, the content should be inside box 3, but since you have set all the boxes with the same widths, this means that the content in box 3 cannot be pushed to the side but only to the bottom—you can see how float interacts with the content of box 3 if you reduce it's width:
.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;
width: 25px;
}
.three {
opacity: 0.3;
}
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3 random content here</div>