Clearfix

A Clearfix arra a problémára ad megoldást, hogy az úsztatott elemek nem tolják szét a szülő konténerük magasságát, így például ha egy elem csak úsztatott elemeket tartalmaz, a magassága 0-val lesz egyenlő.

Az alábbi példában a nem úsztatott elem a szülő magasságát széttolja (a szülő elem vörös kerettel van körbevéve).

A gyermeket balra vagy jobbra úsztatva a szülő elem magasságára már nem lesz hatással:

A gyermek elem jobbra úsztatva.

Ez jellemzően akkor jelent gondot, ha szövegben úsztatunk egy képet, és a kép túllóg a szülő elem határán:

A szövegben a kép balra van úsztatva.

Az alábbi CSS-t elhelyezve a szülő elemen az úsztatott gyermekek befolyásolják az elem magasságát:

CSS

.cf:before,
.cf:after {
  content: " ";
  display: table;
}


.cf:after {
  clear: both;
}

HTML

<div class="cf">
     <img src="tiger.jpg" alt="Sleaping tiger">
     <p>Lorem ipsum dolor sit amet ...</p>  
</div>