Kiinnitetään huomiota kellukkeen haittoihin. Kuinka lohko- ja inline-elementit käyttäytyvät keskenään ja käytetäänkö niitä yhdessä. Analysoimme, mikä on menetys ja miten se käsitellään.
Huolimatta siitä, että viimeisessä artikkelissa rakensimme sivustolle yksinkertaisen ruudukon käyttämällä kellukkeita, niiden on alun perin tarkoitus säätää elementtien kulkua tekstissä. Floatilla on kolme merkitystä: vasen - elementit tarttuvat vasempaan marginaaliin; oikea - elementit painetaan oikeaan reunaan; ei mitään - Wrap-tila on poistettu käytöstä.
Float-kääritty elementti voidaan mitoittaa ja pehmustaa, mutta jos elementti on linjassa, se käyttäytyy kuin lohkoelementti.
.block1 {
kellua: vasen;
leveys: 150px;
}
.block2 {
kellua: oikea;
leveys: 150px;
}
Uimureiden käytössä on toinen ongelma, joka putoaa virtauksesta. Se ilmestyy, kun lohkot kulkevat peräkkäin, mutta vain yhdellä niistä on float-ominaisuus, sitten se on muiden päällä, koska se ei näe muita lohkoja. Inline-elementit kietoutuvat float-elementtien ympärille, mutta tätä tekstiä sisältävä lohko jää float-elementin alle.
Mutta miten kellunta on vuorovaikutuksessa kelluvan kanssa?
He käyttäytyvät kuin teksti: he seisovat peräkkäin niin kauan kuin vapaata tilaa on, ja siirtyvät sitten uudelle riville. Siksi aloimme rakentaa ritilöitä kellukkeiden avulla. Jos tilaa ei ole jäljellä, ne siirretään sivuston leveyden ulkopuolelle, eli ne eivät mene mihinkään.
Jos uimuri ei näe yksinkertaisia lohkoelementtejä, lohkoelementit voidaan opettaa näkemään uimurin. Käytämme clear-ominaisuutta, joka poistaa käärinnän kaikilta puolilta (tai valituilta). Eli elementti, jolla on kirkas, putoaa kelluvan elementin alle.
