Как правильно называется принцип, согласно которому-пример 1 привожу.
В первом примере - у нас див растянулся на 100%, хоть и не прижался к окончанию контента(что логично, ибо контент в теории занимает больше 100% по ширине, но и нелогично, ибо не занимает минимальное возможное пространство) и переносится.
Второй случай-обычное прижатие.
<style>
.test_7{
border: 2px solid #D10000;
float:left;
}
.test_7 div {
float:left;
}
</style>
<div class='test_7'>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
</div>
<style>
.test_7{
border: 2px solid #D10000;
float:left;
}
.test_7 div {
float:left;
}
</style>
<div class='test_7'>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
</div>