Объясните банально простую вещь

Akhmedgadzhi Akhmedgadzhiev
<div class="alpha">
        <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus autem vitae reprehenderit facere debitis quae nobis sit perferendis, ipsum cumque. Repellat nesciunt, voluptatum facere, suscipit debitis ad libero placeat quod.
        </div>
    </div>

Вот код - все просто блок alpha включает в себя блок box, но если в CSS указать блоку alpha border например красного цвета то можно заметить что верхний блок не обромил свое содержимое - хотя это соверщенно неправильно.
В общем объясните почесу могло так получится. Вот кстати и CSS:

.alpha {
border: 2px solid red;
margin: 0 auto;
}
.alpha:hover {
border: 2px solid yellow;
}
.box {
width: 300px;
height: 300px;
border: 10px solid #000;
padding: 30px;
float: left;
margin: 10px;
}

Akhmedgadzhi Akhmedgadzhiev около 1 года назадСпасибо 1
0 чел.