Mari kita perhatikan kelemahan float. Bagaimana elemen blok dan sebaris berperilaku satu sama lain dan apakah akan menggunakannya bersama-sama. Mari kita analisa apa itu kerugian dan bagaimana cara menghadapinya.
Terlepas dari kenyataan bahwa dalam artikel terakhir kami membuat kisi sederhana untuk situs menggunakan pelampung, mereka pada awalnya dimaksudkan untuk menyesuaikan aliran elemen dalam teks. Float memiliki tiga arti: kiri - elemen menempel pada margin kiri; kanan - elemen ditekan ke tepi kanan; tidak ada - Mode bungkus dinonaktifkan.
Elemen yang dibungkus float dapat diukur dan diberi bantalan, tetapi jika elemennya sejajar, elemen tersebut akan berperilaku seperti elemen blok.
.blok1 {
mengapung: kiri;
lebar: 150 piksel;
}
.blok2 {
mengapung: benar;
lebar: 150 piksel;
}
Ada masalah lain saat menggunakan pelampung, yaitu jatuh dari sungai. Itu muncul ketika blok berjalan satu demi satu, tetapi hanya satu dari mereka yang memiliki properti float, maka itu akan berada di atas yang lain, karena tidak melihat blok lain. Elemen sebaris akan membungkus elemen float, tetapi blok yang berisi teks ini akan tetap berada di bawah elemen float.
Tapi bagaimana float berinteraksi dengan float?
Mereka berperilaku seperti teks: mereka berdiri satu demi satu selama ada ruang kosong, dan kemudian pindah ke baris baru. Karena itu, dengan bantuan pelampung, kami mulai membangun kisi-kisi. Jika tidak ada ruang yang tersisa, maka mereka dipindahkan melampaui lebar situs, yaitu, mereka tidak pergi ke mana-mana.
Jika pelampung tidak melihat elemen balok sederhana, maka elemen balok dapat diajari untuk melihat pelampung. Kami menggunakan properti clear, yang menonaktifkan pembungkus dari semua sisi (atau dari yang dipilih). Artinya, elemen dengan clear akan jatuh di bawah elemen dengan float.
