Starsi "webowcy" zapewne pamiętają czasy używania float. Właściwość ta była używana do praktycznie wszystkiego, od pozycjonowania grafik w tekście "oblewanie grafiki tekstem" czy przez ustawianie divów. W tamtym czasie nie było czegoś takiego jak flex czy grid. Wszędzie wstawiało się clearfix ale nie o tym mowa.
.a {
width: 200px;
border: 1px solid;
height: 40px;
float: left;
}
.b,.c {
border: 1px solid;
width: 40px;
height: 40px;
float: left;
}<div class="a">test 123456</div>
<div class="b">123</div>
<div class="c">123</div>.a {
width: 200px;
border: 1px solid;
height: 40px;
float: left;
}
.b,.c {
border: 1px solid;
width: 40px;
height: 40px;
float: left;
}<span class="a">test 12345</span>
<span class="b">123</span>
<span class="c">123</span>Div otrzymuje rozmiar width równy rozmiarowi zawartości diva
<body>
<style>
#blo {
border: 1px solid;
height: 200px;
float: left;
}
</style>
<div id="blo">test</div>
</body>
</html>Div otrzymuje rozmiar width równy rozmiarowi body
<html>
<body>
<style>
#blo {
border: 1px solid;
height: 200px;
}
</style>
<div id="blo">test</div>
</body>
</html>