Float Issue: содержимое выпрыгивает из родительского div

Question

Я понимаю, что если я буду плавать над элементом, следующие элементы в конце концов исчезнут за этим элементом, если у них нет собственного поплавка или, по крайней мере, очистить поплавок. Так же, как это происходит с «коробкой три» в этом примере. Но почему содержимое коробки три выпрыгивает из 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 
} 

* Edit:

Вот еще один пример, чтобы объяснить вопрос, который я не понимаю. Почему не номер два только внутри синей коробки? @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>

Answer 2

Да, содержание должно быть внутри коробки 3, но так как вы установили все коробки с одинаковой шириной, это означает, что содержание в графе 3 не может быть отодвинута в сторону но только в нижней — вы можете увидеть, как поплавок взаимодействует с содержимым коробки 3, если вы уменьшите его ширина:

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