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
1
.cf:before,
2
.cf:after {
3
content: " ";
4
display: table;
5
}
6
7
.cf:after {
8
clear: both;
9
}
Copied!
1
<div class="cf">
2
<img src="tiger.jpg" alt="Sleaping tiger">
3
<p>Lorem ipsum dolor sit amet ...</p>
4
</div>
Copied!
Last modified 2yr ago
Export as PDF
Copy link