Låt oss vara uppmärksamma på nackdelarna med float. Hur block- och inlineelement beter sig med varandra och om de ska användas tillsammans. Låt oss analysera vad en förlust är och hur vi ska hantera den.
Trots att vi i den senaste artikeln byggde ett enkelt rutnät för webbplatsen med hjälp av flottörer, är de ursprungligen avsedda att justera flödet av element i texten. Float har tre betydelser: vänster - elementen håller sig till vänster marginal; höger - element pressas till höger kant; ingen - Wrap-läge är inaktiverat.
Ett element med flytande element kan dimensioneras och stoppas, men om elementet är inbyggt kommer det att fungera som ett blockelement.
.block1 {
flyta till vänster;
bredd: 150px;
}
.block2 {
flyta: höger;
bredd: 150px;
}
Det finns ett annat problem när du använder flottör, som faller ut ur strömmen. Det visas när blocken går efter varandra, men bara en av dem har float-egenskapen, då kommer den att ligga ovanpå resten, eftersom den inte ser andra block. Inbyggda element lindas runt flytelement, men blocket som innehåller denna text kommer att förbli under flottelementet.
Men hur interagerar float med float?
De beter sig som text: de står efter varandra så länge det finns ledigt utrymme och flyttar sedan till en ny rad. Därför, med hjälp av flottörer, började vi bygga galler. Om det inte finns något utrymme kvar flyttas de bortom webbplatsens bredd, det vill säga de går ingenstans.
Om flottören inte ser enkla blockelement kan blockelementen läras att se flottören. Vi använder den tydliga egenskapen, som inaktiverar inslagning från alla sidor (eller från utvalda). Det vill säga ett element med klart faller under elementet med flyt.
