Penggunaan yang Tepat Properti float CSS bisa menjadi bukan tugas yang mudah bahkan untuk desainer tata letak berpengalaman. Artikel ini mengumpulkan opsi untuk menggunakan float, serta beberapa kesalahan, dengan contoh yang jelas.

Apa itu mengapung?

Salah satu cara untuk menetapkan ulang tipe float ke elemen adalah dengan menggunakan properti float. Contoh klasik- gunakan float untuk menyelaraskan gambar ke kiri atau kanan. Berikut kode HTML sederhana untuk gambar dan paragraf:

Lorem ipsum...

Tambahkan sedikit gambar CSS:
img ( float: kanan; margin: 20px; )

Ini menghasilkan keselarasan yang benar:

Jika ada lebih banyak teks, paragraf akan membungkus gambar:

Katakanlah kita perlu membuat indentasi 20 piksel antara gambar dan teks. Konstruksi ini tidak akan berfungsi: p (margin: 20px;)

Benar seperti ini:
img (margin: 20 piksel;)

Mengapa indentasi paragraf tidak berfungsi? Untuk mengetahuinya, mari tambahkan bingkai:

P ( batas: solid 1px hitam; )

Hasilnya mungkin mengejutkan Anda:

Ternyata gambarnya ada di dalam paragraf! Itu sebabnya properti margin tidak berfungsi pada kasus pertama. Untuk memperbaikinya, Anda dapat menerapkan float:left ke paragraf dan menentukan lebar absolut:

Aturan pelampung yang aneh

Mari beralih ke lebih banyak lagi pilihan yang rumit penggunaan float: dengan aturan yang mengatur objek mengambang. Ini mungkin diperlukan saat menata galeri gambar. Misalnya:

Secara default, setiap item daftar akan muncul di baris baru. Jika Anda menerapkan float:left pada masing-masing gambar, gambar akan sejajar dengan jeda baris:

Li ( float: kiri; margin: 4px; )

Tetapi bagaimana jika gambarnya memiliki ketinggian yang berbeda?

Jika kita menambahkan tampilan satu baris ke item daftar, itu akan terlihat sedikit lebih cantik:

Li ( tampilan: sebaris; )

Sekarang mari kita sejajarkan secara vertikal:

Img ( perataan vertikal: atas; )

Perlu diingat bahwa jika tinggi gambar lebih besar, gambar yang tersisa hanya membungkus gambar sebelumnya, misalnya:

Contoh mengubah urutan elemen - misalnya, kami memiliki daftar elemen secara berurutan:

Jika kita ingin mengaturnya urutan terbalik, cukup gunakan float:right daripada float:left, dan Anda tidak perlu mengubah urutan dalam HTML:

Menggunakan float berguna untuk mengelompokkan elemen pada halaman, tapi masalah besar Apa yang terjadi adalah elemen berikutnya (teks atau blok) juga mendapatkan properti pembungkus. Misalnya, kami memiliki satu blok gambar:

Teks di bawahnya mulai membungkus seluruh blok:

Untuk menghindari hal ini, Anda harus menggunakan properti clear. Jika kita menerapkannya pada gambar kedua:

Ul li:anak ke-n(2) ( jelas: kiri; )

Kami mendapatkan ini:

Dalam hal ini, gambar yang tersisa terus mewarisi float:left. Oleh karena itu, teks akan ditampilkan dengan kikuk:

Anda perlu menerapkan clear:both pada paragraf:

P ( jelas: keduanya; )

Masalah kita terpecahkan:

Sekarang katakanlah kita perlu mengatur latar belakang galeri dari contoh sebelumnya. Jika elemennya tidak mengambang, tampilannya akan seperti ini:

Ul ( latar belakang: abu-abu; )

Namun jika Anda menerapkan float:left ke elemen daftar, latar belakangnya akan hilang sepenuhnya:

Jika kita mengatur ketinggian ke UL terlebih dahulu:

Ul ( tinggi: 300 piksel; )

Ini juga tidak menyelesaikan masalah, karena... Dimensi latar belakang diatur secara mutlak. Kelas clearfix akan membantu kita, yang akan diterapkan ke div pada level yang sama dengan elemen UL.

Clearfix ( hapus: keduanya; )

Ada solusi lain menggunakan overflow:

Ul ( luapan: otomatis; )

Sembilan aturan untuk elemen float:

1. Elemen mengambang tidak dapat melampaui tepi wadah induknya.
2. Setiap elemen mengambang akan muncul di sebelah kanan atau di bawah elemen sebelumnya dengan float:left, atau di sebelah kiri dan di bawah elemen sebelumnya dengan float:right.
3. Sebuah blok dengan float:left tidak boleh lebih jauh ke kanan daripada blok dengan float:right.
4. Elemen mengambang tidak dapat melampaui batas atas wadahnya.
5. Elemen mengambang tidak dapat diposisikan lebih tinggi dari blok induknya atau elemen mengambang sebelumnya.
6. Elemen mengambang tidak dapat diposisikan lebih tinggi dari baris elemen sebaris sebelumnya
7. Balok apung harus diposisikan setinggi mungkin.
8. Satu elemen mengambang yang mengikuti elemen lainnya tidak dapat melampaui wadahnya - elemen tersebut akan terbungkus ke baris berikutnya.
9. Blok dengan float:left harus diposisikan sejauh mungkin ke kiri, dan blok dengan float:right harus diposisikan sejauh mungkin ke kanan.

Benar menggunakan CSS properti float dapat menjadi tantangan bahkan bagi desainer tata letak berpengalaman. Artikel ini mengumpulkan opsi untuk menggunakan float, serta beberapa kesalahan, dengan contoh yang jelas.

Apa itu mengapung?

Salah satu cara untuk menetapkan ulang tipe float ke elemen adalah dengan menggunakan properti float. Contoh klasiknya adalah penggunaan float untuk menyelaraskan gambar ke kiri atau kanan. Berikut kode HTML sederhana untuk gambar dan paragraf:

Lorem ipsum...

Tambahkan beberapa CSS ke gambar:
img ( float: kanan; margin: 20px; )

Ini menghasilkan keselarasan yang benar:

Jika ada lebih banyak teks, paragraf akan membungkus gambar:

Katakanlah kita perlu membuat indentasi 20 piksel antara gambar dan teks. Konstruksi ini tidak akan berfungsi: p (margin: 20px;)

Benar seperti ini:
img (margin: 20 piksel;)

Mengapa indentasi paragraf tidak berfungsi? Untuk mengetahuinya, mari tambahkan bingkai:

P ( batas: solid 1px hitam; )

Hasilnya mungkin mengejutkan Anda:

Ternyata gambarnya ada di dalam paragraf! Itu sebabnya properti margin tidak berfungsi pada kasus pertama. Untuk memperbaikinya, Anda dapat menerapkan float:left ke paragraf dan menentukan lebar absolut:

Aturan pelampung yang aneh

Mari beralih ke penggunaan float yang lebih kompleks: aturan yang mengatur objek mengambang. Ini mungkin diperlukan saat menata galeri gambar. Misalnya:

Secara default, setiap item daftar akan muncul di baris baru. Jika Anda menerapkan float:left pada masing-masing gambar, gambar akan sejajar dengan jeda baris:

Li ( float: kiri; margin: 4px; )

Tetapi bagaimana jika gambarnya memiliki ketinggian yang berbeda?

Jika kita menambahkan tampilan satu baris ke item daftar, itu akan terlihat sedikit lebih cantik:

Li ( tampilan: sebaris; )

Sekarang mari kita sejajarkan secara vertikal:

Img ( perataan vertikal: atas; )

Perlu diingat bahwa jika tinggi gambar lebih besar, gambar yang tersisa hanya membungkus gambar sebelumnya, misalnya:

Contoh mengubah urutan elemen - misalnya, kami memiliki daftar elemen secara berurutan:

Jika kita ingin menempatkannya dalam urutan terbalik, kita cukup menggunakan float:right dan bukan float:left, dan kita tidak perlu mengubah urutannya dalam HTML:

Penggunaan float memudahkan untuk mengelompokkan elemen pada halaman, namun masalah besarnya adalah elemen berikutnya (teks atau blok) juga menerima properti float. Misalnya, kami memiliki satu blok gambar:

Teks di bawahnya mulai membungkus seluruh blok:

Untuk menghindari hal ini, Anda harus menggunakan properti clear. Jika kita menerapkannya pada gambar kedua:

Ul li:anak ke-n(2) ( jelas: kiri; )

Kami mendapatkan ini:

Dalam hal ini, gambar yang tersisa terus mewarisi float:left. Oleh karena itu, teks akan ditampilkan dengan kikuk:

Anda perlu menerapkan clear:both pada paragraf:

P ( jelas: keduanya; )

Masalah kita terpecahkan:

Sekarang katakanlah kita perlu mengatur latar belakang galeri dari contoh sebelumnya. Jika elemennya tidak mengambang, tampilannya akan seperti ini:

Ul ( latar belakang: abu-abu; )

Namun jika Anda menerapkan float:left ke elemen daftar, latar belakangnya akan hilang sepenuhnya:

Jika kita mengatur ketinggian ke UL terlebih dahulu:

Ul ( tinggi: 300 piksel; )

Ini juga tidak menyelesaikan masalah, karena... Dimensi latar belakang diatur secara mutlak. Kelas clearfix akan membantu kita, yang akan diterapkan ke div pada level yang sama dengan elemen UL.

Clearfix ( hapus: keduanya; )

Ada solusi lain menggunakan overflow:

Ul ( luapan: otomatis; )

Sembilan aturan untuk elemen float:

1. Elemen mengambang tidak dapat melampaui tepi wadah induknya.
2. Setiap elemen mengambang akan muncul di sebelah kanan atau di bawah elemen sebelumnya dengan float:left, atau di sebelah kiri dan di bawah elemen sebelumnya dengan float:right.
3. Sebuah blok dengan float:left tidak boleh lebih jauh ke kanan daripada blok dengan float:right.
4. Elemen mengambang tidak dapat melampaui batas atas wadahnya.
5. Elemen mengambang tidak dapat diposisikan lebih tinggi dari blok induknya atau elemen mengambang sebelumnya.
6. Elemen mengambang tidak dapat diposisikan lebih tinggi dari baris elemen sebaris sebelumnya
7. Balok apung harus diposisikan setinggi mungkin.
8. Satu elemen mengambang yang mengikuti elemen lainnya tidak dapat melampaui wadahnya - elemen tersebut akan terbungkus ke baris berikutnya.
9. Blok dengan float:left harus diposisikan sejauh mungkin ke kiri, dan blok dengan float:right harus diposisikan sejauh mungkin ke kanan.

Mari kita lihat apa yang terjadi pada elemen ketika properti float diterapkan padanya:

• Elemen “mengambang” dan ditekan ke tepi kiri (jika float: kiri) atau kanan (float: kanan) dari elemen induk atau elemen yang juga diberikan nilai mengambang
• Jika suatu elemen tidak dapat muat dalam satu baris dengan elemen lain karena lebar blok induk, elemen tersebut akan dipindahkan ke bawah hingga tersedia cukup ruang untuknya.
• Elemen blok lain yang tidak ditentukan floatnya berperilaku seolah-olah elemen dengan float tidak ada di halaman (elemen telah melayang). Garis “mengetahui” bahwa elemen telah melayang dan membungkusnya
• Lebar blok yang disetel ke float ditentukan oleh kontennya.

Mari kita lihat sebuah contoh. Batalkan komentar pada properti float: left di dalam CSS. Lihatlah hasilnya.

Ganti float:kiri dengan float:kanan.

Properti float berguna untuk memungkinkan teks membungkus gambar. Perhatikan sebuah contoh:

Tambahkan komentar ke rangkaian CSS file ke float: properti kiri. Lihat bagaimana tata letak halaman akan berubah. Ganti float: kiri dengan float: kanan.

“Ciutkan” elemen induk ketika “anak” muncul

Biarkan elemen dua ditempatkan di dalam elemen satu. Secara default, tinggi satu akan membentang di seluruh konten. Segera setelah kita menerapkan properti float ke dua elemen, elemen tersebut akan mengapung, dan elemen induk satu tidak akan mengetahui bahwa dua elemen itu ada. Jika dua tidak mempunyai isi, maka tingginya nol. Perilaku ini disebut "runtuh". Untuk mencegah induknya runtuh, properti min-height diberikan padanya - tinggi minimum, atau sebuah metode digunakan: blok lain ditambahkan, yang propertinya disetel:

Blok ini tidak terlihat di halaman, tetapi properti clear:both menghilangkan pembungkus elemen dan merentangkan induk ke ketinggian konten.

Batalkan komentar pada properti float:left di CSS. Lihat bagaimana perilaku elemen induk:

Perhatikan contoh penggunaan clear: keduanya

Jadi, Anda sudah familiar dengan sifat dasar float. Mari kita praktikkan ilmu kita.

Menjalankan

Tugas 1. Tambahkan kelas ke gambar. Di kelas, tentukan properti float:left. Pelajari bagaimana keluaran halaman akan berubah.

Semua elemen yang muncul pada halaman HTML tidak lebih dari persegi panjang. Dan pada dasarnya hanya dua jenis:

1. balok (blok), yang menempati seluruh lebar tempatnya berada, dan terpisah dari apa yang ada di atas dan di bawahnya. Misalnya, ini adalah tag DIV, P, H.
2. bawaan (sebaris). Misalnya SPAN, KUAT, EM, A dan IMG.

tabel.

Peran properti meningkat setelah transisi dari tata letak tabel ke tata letak div. Hal ini karena float memungkinkan pengembang web untuk memasukkan kolom tanpa harus menggunakan tabel. Itu bisa membutuhkan nilai Kanan, kiri, tapi tidak tengah.

Menggunakan properti display: block; atau tampilan: sebaris; kami mengonversi satu jenis persegi panjang ke jenis persegi panjang lainnya. Misalnya, daftar UL yang memiliki sejumlah blok LI dapat disusun secara horizontal:

• AYAT
• AYAT
• AYAT

• AYAT
• AYAT
• AYAT

Saat menggunakan properti float, persegi panjang berbentuk balok, tetapi dengan fitur karakteristik: Lebarnya tidak akan meluas ke seluruh konten. Misalnya, header h3 terlihat seperti:

ini HEADER h3

ini HEADER h3

ini HEADER h3

ini HEADER h3

Teks teratas tetap tidak berubah karena elemen mengambang tidak dapat ditempatkan di atas garis pembuatannya.

ini HEADER h3

Tapi teks merahnya ada di bawah judul dan akan mengalir mengelilinginya, tanpa ada apapun gaya tambahan. Dan hanya ketinggian h3 yang akan diatasi, halaman akan kembali ke tatanan aslinya.

A B C D Beberapa elemen mengambang akan mengikuti urutan lokasinya.

ABDI DALAMG teks...

A B C D Jika kita berjalan sehingga aliran di sekitar elemen berhenti dengan momen tertentu(dari sini), properti clear diterapkan. Kita dapat menambahkannya ke tag kosong

Untuk menempatkan beberapa blok persegi panjang secara merata, kami memberinya lebar yang sama.

Tata letak tabel sangat nyaman dan mudah dimengerti, mungkin itulah sebabnya tampilan analognya: tabel; Formulir yang sama diperoleh dengan kode yang lebih sedikit.

Sekarang Anda dapat melihat bagaimana galeri gambar dibuat. Saya harap tidak ada yang lupa.

teks...

teks...

Setelah saya ditanya untuk keenam puluh delapan kalinya mengapa blok dengan float tidak ditampilkan dengan benar, saya memutuskan untuk menulis catatan ini, yang akan menjelaskan situasi umum yang dihadapi perancang tata letak pemula, dan juga untuk sekadar memberikan tautan ke ini artikel lain kali.

Penafian

Properti elemen dengan float yang harus selalu Anda ingat

• Barang ditampilkan seperti kotak-kotak, seolah-olah memiliki properti display: block;
• Elemen lebarnya dikompresi dengan ukuran konten, kecuali lebarnya ditentukan secara eksplisit untuk elemen tersebut;
• Elemen tongkat ke tepi kiri (kiri) atau tepi kanan (kanan);
• Segala sesuatu yang lain konten halaman dalam kode HTML setelah elemen dengan float, membungkusnya;

Kejadian hidup #1

Menyebabkan

Selain itu, elemen blok secara default memiliki lebar (bukti) maksimum yang mungkin di dalam induknya. Elemen melayang Anda tidak cocok dengan elemen pertama elemen blok dengan lebar maksimum, sehingga didorong ke bawah.

Juga Semua konten situs yang datang dalam kode HTML setelah elemen mengambang mengalir di sekitarnya, yang sering kali menimbulkan efek yang tidak terduga.

Larutan

Solusi #2. Tambahkan blok kosong dengan clear: Both . Menambahkan elemen seperti itu akan menghilangkan “daya apung” balok dan membuat wadah meregang hingga ketinggian maksimalnya. Secara semantik ini bukan yang terbaik solusi terbaik, sejak diperkenalkan elemen tambahan tanda.

Solusi #3. Terapkan properti overflow: auto (atau tersembunyi) ke kontainer. Menyebabkan penampung menghitung ulang ketinggian dan mengubahnya untuk menyertakan elemen mengambang, jika tidak maka penampung harus menambahkan bilah gulir atau menyembunyikannya. Namun, hal ini terkadang terjadi, jadi berhati-hatilah.

UPD
Baca juga sebagai lanjutan pembahasan properti float.