Menggunakan Properti mengapung CSS untuk Desain Halaman Web Layouts
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 semua 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 jangan membuat kotak di halaman disebut sebagai elemen sebaris dan tidak dapat mengambang. 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 ini, saya akan mengapungkan elemen DIV kecil 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 Anda harus selalu menentukan lebar pada elemen mengambang.
- Jika elemen penampung adalah elemen HTML, DIV yang mengambang akan duduk di margin kiri halaman.
- Jika elemen penampung itu sendiri terkandung oleh sesuatu yang lain, DIV melayang akan duduk di margin kiri wadah.
- Anda dapat mengumpulkan elemen mengambang, dan itu dapat menyebabkan float berakhir di tempat yang mengejutkan. Sebagai contoh, float ini adalah DIV mengambang kiri di dalam DIV melayang kanan.
- Elemen yang mengambang akan saling berdampingan jika ada ruang di dalam wadah. Misalnya, penampung ini memiliki tiga elemen DIV lebar 100px yang melayang 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) dalam DIV dengan judul dan mengambang elemen DIV 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 float. 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 memahami bagaimana properti float bekerja, 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 mengetahui lebar (persentase baik-baik saja) dari bagian tata letak Anda, Anda dapat menggunakan properti float 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.