Clearfix - patak tisztítása megőrzése a szerkezeti elrendezés

  • blokk szülő
  • A lebegő egység tömbbe beágyazott szülő
  • szöveget (vagy blokk vagy bármi más), amely körbeveszi az úszó egységet (szükséges demonstrációs)
  1. milyen magasságban ebben az esetben a szülő blokk (div class = „szülő”)?
  2. Hol van a blokk (div class = „nextStaticBlock”), alá a blokk szülő?

Helyes válaszok a következők:

Ez várható, hogy a következő blokk alatt található a blokk-szülő, amelynek magassága egyenlő a magassága a legmagasabb gyermek blokk (ebben a példában, a magassága a lebegő egység)

Clearfix - patak tisztítása megőrzése a szerkezeti elrendezés

a valóságban, a következő blokk (a legtöbb böngészőben) valóban egy al-szülői egység, de a magassága a szülő magasságával egyenlő a statikus (nem változó) tartalom

Clearfix - patak tisztítása megőrzése a szerkezeti elrendezés

A régi megoldás

Öbiítőáram segítségével egy további elemet, végén elhelyezett, a szülői egység a tulajdonság vagy attribútum tiszta (

):

Demo. A hátránya ennek a módszernek - nincs egyetlen helyes, elrontja a strukturális és szemantikai kódelemét. Gyakran egyetlen célja - egy tiszta patak.

Az új megoldás

frissítés 17.12.09 Egor Skornyakov -, hogy elrejtse a pont jobb láthatóság használni. helyett rejtett túlfolyó. rejtett, mert Egyes böngészőkben, a lényeg még mindig látható.

Törölje a túlfolyó stream: rejtett

frissítés Egor Skornyakov

Ugyanez a helyzet szennyvízkezelő több konzisztens módon - új szabály túlcsordulás. rejtett szülő amely úszó elemeket:

Demo példa. A módszer egyszerű, de nem mindig alkalmazzák (például, ha a szülő abszolút pozicionált elemek túl kell lépnie a határait a szülő példa -. Legördülő menü).

micro clearfix

Ha nem kell a támogatást IE6-7:

Ha szükséges, akkor biztonságosabb használni ezt az opciót: