Properti CSS adalah properti yang sangat penting untuk tata letak. Ini memungkinkan Anda untuk memposisikan desain halaman web persis seperti yang Anda inginkan untuk ditampilkan - tetapi untuk menggunakannya, Anda harus memahami cara kerjanya.
Dalam style sheet, properti float CSS terlihat seperti ini:
.right {float: right; }
Ini memberitahu browser bahwa segala sesuatu dengan kelas "benar" harus dilayangkan ke kanan.
Anda akan menetapkannya seperti ini:
class = "right" />
Apa yang Dapat Anda Apung dengan Properti float CSS?
Anda tidak dapat mengapung setiap elemen di halaman web. Anda hanya dapat mengapung elemen tingkat blok. Ini adalah elemen yang mengambil blok ruang di halaman, seperti gambar (), paragraf (), divisi (), dan daftar ().
Elemen lain yang memengaruhi teks, tetapi tidak membuat kotak di halaman disebut elemen sebaris dan tidak dapat dilayangkan. Ini adalah elemen seperti span (), line break (), strong emphasis (), atau italics ().
Di mana mereka mengapung?
Anda bisa mengapungkan elemen ke kanan atau ke kiri. Elemen apa pun yang mengikuti elemen mengambang akan mengalir di sekitar elemen mengambang di sisi lain.
Misalnya, jika saya mengapungkan gambar ke kiri, teks atau elemen lain yang mengikutinya akan mengalir di sekitarnya ke kanan. Dan jika saya mengapungkan gambar ke kanan, teks atau elemen lain yang mengikutinya akan mengalir di sekitarnya ke kiri. Sebuah gambar yang ditempatkan di blok teks tanpa gaya mengapung apa pun yang diterapkan akan menampilkannya namun browser diatur untuk menampilkan gambar. Ini biasanya dengan baris pertama teks berikut ditampilkan di bagian bawah gambar.
Seberapa Jauh Mereka Akan Mengapung?
Elemen yang telah dilayang akan bergerak sejauh mungkin ke kiri atau kanan elemen penampung. Ini menghasilkan beberapa situasi yang berbeda tergantung pada bagaimana kode Anda ditulis. Untuk contoh-contoh ini, saya akan mengambang kecil DIV
elemen ke kiri:
- Jika elemen floated tidak memiliki lebar yang ditentukan sebelumnya, itu akan mengambil banyak ruang horizontal seperti yang diperlukan dan tersedia, terlepas dari float tersebut. Catatan: beberapa browser mencoba menempatkan elemen di samping elemen mengambang ketika lebar tidak ditentukan - biasanya memberikan elemen yang tidak mengambang hanya sejumlah kecil ruang. Jadi kamu harus selalu tentukan lebar pada elemen mengambang.
- Jika elemen penampung adalah elemen HTML, yang mengambang
DIV
akan duduk di margin kiri halaman. - Jika elemen kontainer itu sendiri terkandung oleh sesuatu yang lain, yang mengambang
DIV
akan duduk di margin kiri wadah. - Anda dapat mengumpulkan elemen mengambang, dan itu dapat menyebabkan float berakhir di tempat yang mengejutkan. Sebagai contoh, pelampung ini adalah mengambang kiri
DIV
di dalam melayang kananDIV
. - Elemen yang mengambang akan saling berdampingan jika ada ruang di dalam wadah. Misalnya, wadah ini memiliki lebar tiga hingga 100 piksel
DIV
elemen mengambang dalam wadah lebar 400px.
Anda bahkan dapat menggunakan pelampung untuk membuat tata letak galeri foto. Anda menempatkan setiap thumbnail (itu berfungsi paling baik ketika mereka semua ukuran yang sama) di a DIV
dengan caption dan float the DIV
elemen dalam wadah. Tidak peduli seberapa lebar jendela browser, thumbnail akan berbaris seragam.
Mematikan Float
Setelah Anda tahu cara membuat elemen mengambang, penting untuk mengetahui cara mematikan pelampung. Anda mematikan float dengan properti CSS yang jelas. Anda dapat menghapus float kiri, float kanan, atau keduanya:
jelas: kiri;jelas: benar;jelas: keduanya;
Setiap elemen yang Anda atur properti yang jelas untuk akan muncul di bawah elemen yang melayang ke arah itu. Misalnya, dalam contoh ini, dua paragraf pertama dari teks tidak dihapus, tetapi yang ketiga adalah.
Bermain dengan nilai yang jelas dari berbagai elemen di dokumen Anda untuk mendapatkan efek tata letak yang berbeda. Salah satu tata letak melayang yang paling menarik adalah serangkaian gambar di kolom kanan atau kiri di samping paragraf teks. Bahkan jika teks tidak cukup panjang untuk menggulir melewati gambar, Anda dapat menggunakan jelas pada semua gambar untuk memastikan bahwa mereka muncul di kolom daripada di samping gambar sebelumnya.
HTML (ulangi paragraf ini):
Duis aute irure dolor sed melakukan eiusmod incididunt sementara di reprehenderit dalam voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.
CSS (untuk mengapungkan gambar ke kiri):
img.float {float: left; jelas: kiri; margin: 5px;}
Dan ke kanan:
img.float {float: right; jelas: benar; margin: 5px;}
Menggunakan Float untuk Tata Letak
Setelah Anda mengerti bagaimana mengapung
bekerja properti, Anda dapat mulai menggunakannya untuk meletakkan halaman web Anda. Ini adalah langkah-langkah yang saya ambil untuk membuat halaman web mengambang:
- Desain tata letak (di atas kertas atau di alat grafis atau di kepala saya).
- Tentukan di mana divisi halaman akan menjadi.
- Tentukan lebar berbagai wadah dan elemen di dalamnya.
- Tutup semuanya. Bahkan elemen kontainer terluar melayang ke kiri sehingga saya tahu di mana itu akan berhubungan dengan port tampilan browser.
Selama Anda tahu lebar (persentase baik-baik saja) dari bagian tata letak Anda, Anda dapat menggunakan mengapung
properti untuk menempatkan mereka di tempat mereka berada di halaman. Dan yang menyenangkan adalah, Anda tidak perlu khawatir tentang model kotak yang berbeda untuk Internet Explorer atau Firefox.