La oss ta hensyn til ulempene med flyte. Hvordan blokkerings- og innebygde elementer oppfører seg med hverandre, og om de skal brukes sammen. La oss analysere hva et tap er og hvordan vi skal håndtere det.
Til tross for at vi i den siste artikkelen bygde et enkelt rutenett for nettstedet ved hjelp av flottører, er de opprinnelig ment for å justere flyten av elementer i teksten. Float har tre betydninger: venstre - elementene holder seg til venstre margin; høyre - elementene presses til høyre kant; ingen - Innpakningsmodus er deaktivert.
Et flyteinnpakket element kan dimensjoneres og polstres, men hvis elementet er integrert, vil det oppføre seg som et blokkelement.
.block1 {
flyte: venstre;
bredde: 150px;
}
.block2 {
flyte: høyre;
bredde: 150px;
}
Det er et annet problem når du bruker flottører, som faller ut av bekken. Det vises når blokkene går etter hverandre, men bare en av dem har flyteegenskapen, så vil den være på toppen av resten, fordi den ikke ser andre blokker. Inline-elementer vil vikles rundt flyteelementer, men blokken som inneholder denne teksten vil forbli under flyteelementet.
Men hvordan interagerer float med float?
De oppfører seg som tekst: de står etter hverandre så lenge det er ledig plass, og beveger seg deretter til en ny linje. Derfor begynte vi å bygge rutenett ved hjelp av flottører. Hvis det ikke er plass igjen, blir de flyttet utover bredden på nettstedet, det vil si at de går ingen steder.
Hvis flottøren ikke ser enkle blokkelementer, kan blokkelementene læres å se flottøren. Vi bruker den klare egenskapen, som deaktiverer innpakning fra alle sider (eller fra utvalgte). Det vil si at et element med klart faller under elementet med flyt.
