Cara menggunakan fungsi float di css

Kami mulai dengan kode sumber kosong. Saya sudah menyiapkan 2 file yaitu float. html dan mengambang. css. Pertama kita isi file HTMLnya dulu

Kami menambahkan HTML Boilerplate. Lalu kita beri judul pelampung. Ingatlah bahwa judul dalam file HTML harus ditulis dua kali. Yang pertama pada tag Judul. Dan kemudian di dalam tag Body, kami menambahkan tag H1 lainnya dengan konten Float

Selanjutnya kita tambahkan tiga div, dengan nama class red yellow green. Kita dapat menulis div. merah + div. kuning+div. hijau dan tekan Ctrl+E. Cara ini hanya bisa dilakukan jika kita sudah menambahkan package Emmet

Sekarang kita akan menambahkan kode CSS. Sebelum melanjutkan, pertama-tama kita buat link tag untuk menuju ke kode CSS kita secara float. css. Dan pemilih pertama yang akan kita tambahkan adalah pemilih div. Kita beri properti width dengan nilai 200px dan height dengan nilai 200px. Setelah itu kita tambahkan masing-masing kelas merah kuning hijau dengan warna background sesuai dengan nama kelasnya

Kami menyimpan dan menyegarkan browser. Kami akan mendapatkan tiga kotak berbaris ke bawah. Sama seperti video sebelumnya

Kita akan belajar tentang properti float. Pertama kita tambahkan properti float ke kelas kuning. Ada 3 nilai yang bisa kita isi untuk float. Yang pertama adalah None, ini adalah nilai default yang artinya tidak ada float. Yang kedua tersisa untuk pelampung di sebelah kiri. Dan yang ketiga tepat untuk pelampung di sebelah kanan. Mari kita coba nilai kiri dulu

Kami menyimpan dan menyegarkan browser. Dulu ada kotak hijau di bawah kotak kuning, sekarang sudah hilang. Jadi properti float ini mirip dengan properti absolute position. Kotak kuning akan dihapus dari alur dokumen, sehingga kotak hijau akan bergerak ke atas untuk mengisi posisi kotak kuning yang lama. Jadi kotak hijau sebenarnya berada di belakang kotak kuning. Untuk melihat kotak hijau, kita bisa menggeser kotak kuning sedikit ke kanan, dengan menambahkan properti margin-left. 100px. Nah sekarang kita bisa melihat kotak hijau di belakang kotak kuning

Selanjutnya kita coba ubah nilai properti float menjadi right. Dan kami menghapus properti margin. Sekarang kotak kuning menjadi mengambang di sebelah kanan. Sedangkan kotak merah dan hijau tetap berada di sebelah kiri

Apa fungsi properti float ini? . langsung dari kelas kuning. Dan kemudian kami menambahkan pelampung. tersisa di div pemilih. Artinya ketiga kotak akan mengapung di sisi kiri. Kami menyimpan dan menyegarkan browser. Sekarang kita memiliki tiga kotak yang disusun ke kanan, dengan urutan merah kuning hijau

Kotak yang disusun ke kanan seperti ini, sebenarnya bisa kita dapatkan dengan menggunakan properti lain. Kami telah mempelajari properti ini di video sebelumnya. Mungkin kalian masih ingat nama propertinya? . kiri. Kemudian kami menggantinya dengan tampilan. inline-blok

Kami menyimpan dan menyegarkan browser. Kami mendapatkan hasil yang sama. Hanya saja sekarang ada spasi antar kotak, hal ini bisa dilakukan dengan menghilangkan semua spasi putih antara tag penutup div dan tag pembuka div

Jadi di dunia pemrograman ini, kita tahu pepatah bahwa ada banyak jalan menuju Roma. Kita bisa mendapatkan hasil yang sama, menggunakan beberapa metode berbeda. Pada contoh di sini adalah dengan menggunakan properti float. meninggalkan atau menampilkan properti. inline-blok

Tapi di sini ada perilaku khusus dari properti float, yang tidak bisa kita dapatkan dari properti display. Misalnya, kami mengubah properti display menjadi float. Baik. Sekarang kita mendapatkan tiga kotak yang disusun dari sisi kanan, dan perhatikan posisi merah, kuning dan hijau dihitung dari sisi kanan. Jika kita ingin menyusun kotak seperti ini dengan menggunakan property display, maka kita harus menambahkan beberapa property lainnya, sedangkan dengan menggunakan property float kita hanya menggunakan satu baris kode saja.

Dan kita juga bisa membuat beberapa kotak disusun dari kanan, dan beberapa kotak disusun dari kiri. Misalnya disini semua kotak disusun dari sisi kanan. Saya menambahkan properti float. tertinggal di kotak kuning. Jadi sekarang kotak kuning ada di kiri, sedangkan kotak merah dan hijau ada di kanan

Kita dapat menggunakan properti float ini untuk membuat sidebar. Misalnya kita membuka situs Detik. Kom. Terlihat di sini, sisi kiri adalah konten utama situs detik. Sedangkan di sisi kanan ada bagian yang kita sebut sidebar

Kami mencoba menerapkannya dalam kode sumber kami. Jadi kami hanya menggunakan 2 div. Katakanlah div merah kita adalah sidebar, jadi kita menulis sidebar konten. Sedangkan div kuning kita isi dengan Main content. Kami menghapus div hijau

Kemudian kita membuat div dengan kelas container. Kami memindahkan seluruh tag h1, div merah dan div hijau ke dalam wadah

Kemudian pada kode CSS, kita hapus semua properti pada div. Kelas merah adalah sidebar dengan lebar lebih kecil. Disini kita beri lebar 200px, tinggi. 600px dan mengapung. kiri. Sementara kelas kuning adalah konten utama, kami memberikan lebar lebih besar 400px, tinggi yang sama 600 piksel dan kami meninggalkan properti float. Dan kemudian kami menghapus kelas hijau

Selanjutnya, agar tampilan kita lebih rapi, kita susun kelas container kita. Kami memberikan lebar 600 piksel. Kami mendapatkan nilai 600 ini dari lebar merah 200 piksel ditambah lebar kuning 400 piksel. Kemudian agar wadahnya berada di tengah layar, kita tambahkan margin. mobil

Nah sekarang kita punya situs blog mock up dengan sidebar seperti situs kedua. Kami hanya menambahkan konten ke bilah samping dan konten utama. Dan ketika kita ingin memindahkan sidebar ke kanan, kita dapat dengan mudah mengubah nilai properti float pada kelas merah ke kanan. Dan sidebar akan bergerak ke kanan

Untuk apa CSS float?

Hapus kedua CSS untuk apa?