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
HTML
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
<div class="cf">
<img src="tiger.jpg" alt="Sleaping tiger">
<p>Lorem ipsum dolor sit amet ...</p>
</div>
Export as PDF
Copy link