Mari perhatikan keburukan apungan. Bagaimana elemen blok dan sebaris berkelakuan antara satu sama lain dan sama ada menggunakannya bersama-sama. Marilah kita menganalisis apa itu kerugian dan bagaimana menanganinya.
Walaupun pada artikel terakhir kami membuat grid sederhana untuk laman web menggunakan apungan, mereka pada awalnya bertujuan untuk menyesuaikan aliran elemen dalam teks. Float mempunyai tiga makna: kiri - elemen melekat pada margin kiri; kanan - elemen ditekan ke tepi kanan; tiada - Mod balut dilumpuhkan.
Elemen yang dilapisi apungan dapat berukuran dan empuk, tetapi jika elemen itu sebaris, ia akan berperilaku seperti elemen blok.
.sekat1 {
terapung: kiri;
lebar: 150px;
}
.sekat2 {
terapung: betul;
lebar: 150px;
}
Terdapat masalah lain ketika menggunakan apungan, yang jatuh dari aliran. Ia muncul ketika blok-blok itu saling berturut-turut, tetapi hanya satu dari mereka yang memiliki harta apungan, maka itu akan berada di atas selebihnya, kerana tidak melihat blok-blok lain. Elemen sebaris akan merangkumi elemen apungan, tetapi blok yang mengandungi teks ini akan berada di bawah elemen apungan.
Tetapi bagaimana float berinteraksi dengan apungan?
Mereka berkelakuan seperti teks: mereka berdiri satu demi satu selagi ada ruang kosong, dan kemudian beralih ke barisan baru. Oleh itu, dengan bantuan apungan, kami mula membina grid. Sekiranya tidak ada ruang yang tersisa, maka mereka dipindahkan melampaui lebar laman web, yaitu, mereka tidak ke mana-mana.
Sekiranya pelampung tidak melihat elemen blok sederhana, maka elemen blok boleh diajar untuk melihat pelampung. Kami menggunakan harta yang jelas, yang melumpuhkan pembungkus dari semua pihak (atau dari yang terpilih). Artinya, elemen dengan jelas akan jatuh di bawah elemen dengan apungan.
