Keling, floatning kamchiliklariga e'tibor qaratsak. Blok va inline elementlar o'zlarini qanday tutadi va ularni birgalikda ishlatish kerakmi. Keling, yo'qotish nima ekanligini va uni qanday hal qilishni tahlil qilaylik.
So'nggi maqolada biz floats yordamida sayt uchun oddiy panjara qurganimizga qaramay, ular dastlab matndagi elementlar oqimini sozlash uchun mo'ljallangan. Float uchta ma'noga ega: chap - elementlar chap chekkaga yopishadi; o'ng - elementlar o'ng chetiga bosilgan; yo'q - o'rash rejimi o'chirilgan.
Suzib o'ralgan element kattalashtirilishi va to'ldirilishi mumkin, lekin agar element ichkarida bo'lsa, u blok elementi kabi harakat qiladi.
.block1 {
suzuvchi: chap;
kengligi: 150 piksel;
}
.block2 {
suzuvchi: o'ng;
kengligi: 150 piksel;
}
Oqimdan tushayotgan suzuvchi vositalardan foydalanishda yana bir muammo mavjud. Bloklar ketma-ket ketganda paydo bo'ladi, lekin ulardan faqat bittasi float xususiyatiga ega, keyin u qolganlarning tepasida bo'ladi, chunki u boshqa bloklarni ko'rmaydi. Ichki elementlar suzuvchi elementlarni o'rab oladi, ammo bu matnni o'z ichiga olgan blok suzuvchi element ostida qoladi.
Ammo float float bilan qanday o'zaro ta'sir qiladi?
Ular o'zlarini matn kabi tutishadi: bo'sh joy bor ekan, ular birin ketin turadilar va keyin yangi qatorga o'tadilar. Shuning uchun, suzuvchi vositalar yordamida biz tarmoqlarni qurishni boshladik. Agar bo'sh joy qolmasa, ular sayt kengligidan tashqariga ko'chiriladi, ya'ni ular hech qaerga ketmaydi.
Agar suzuvchi oddiy blok elementlarini ko'rmasa, unda blok elementlariga suzishni ko'rishni o'rgatish mumkin. Biz har tomondan (yoki tanlanganlardan) o'ralishni o'chirib qo'yadigan aniq xususiyatdan foydalanamiz. Ya'ni, aniq bo'lgan element float bilan element ostiga tushadi.
