Hogyan tilthatja el a csomagolás elemeit a css clear tulajdonság használatával?

Az utolsó leckében az úszó tulajdonság alapelveit fedeztük fel. De az úszó tulajdonság használatakor előfordulhat például a következő probléma.

Mi történt? Az elem alatt lévő blokk elem: a bal tulajdonság egyszerűen felkerült a helyre, ahol nem lett volna egy img elem az úszó bal oldali tulajdonsággal.

Amint azt ebben az esetben mondják, a "törött" design. Tehát nem szabad, minden elemnek helyet kell kapnia a weboldalon.

A probléma megoldásához áramlási korlátozást kell fektetnie a div blokkra, amely alul van.

A CSS-ben, hogy megoldja ezt a problémát meglehetősen egyszerű, akkor használja az egyértelmű tulajdonság. Ha ezt a tulajdonságot hozzáadja egy elemhez, akkor leállítja az elemek körül, amelyekhez hozzá van rendelve az úszó tulajdonság.

A tulajdonság szintaxisa:

nincs - nincs áramláskorlátozás

balra - nincs áramlás a bal oldalon

jobb - az oldal jobb oldalán az áramlás tilalma

mindkettő - mindkét oldalon áramlási tilalom

inherit - az érték öröklődik a szülőelemből

A legtöbb esetben használhatja a tiszta: mindkét értéket, így nem kell meggyőződnie arról, hogy melyik oldalon akarja megakadályozni az áramlás áramlását.

Amint láthatja, most a blokk elfoglalta helyét, és már nem érinti az úszó: az img elem bal tulajdonsága.

Az egyértelmű tulajdonságot gyakran használják a gyakorlatban, amikor egy weboldal objektumcsomagolással használja az úszó tulajdonságot. Ezzel megakadályozhatja, hogy a blokkelemek ne essenek ki a normál adatfolyamból, amikor weboldalakat készítenek.

Talán érdekel az oldal elrendezési szolgáltatása. Ezután kattintson az alábbi linkre, ha többet szeretne megtudni erről.