Hallo teman-teman apa kabar semuanya, jumpa lagi dengan saya pada tutorial Dumet School. Di artikel kali ini kita akan belajar Cara Menggunakan Property Float Pada CSS seperti yang kita tahu arti dari kata float yang berarti mengapung. Sebuah elemen bisa diposisikan seolah-olah berada mengapung diantara elemen setelahnya. Mengapung disini, berarti elemen yang mengalami float dan akan dipindahkan ke tepi paling kiri (float:left) atau tepi paling kanan (float:right) dari element parrent nya.

Baik, sekarang langsung saja kita praktekkan. Seperti biasa teman-teman siapkan text editornya dan copy script html nya di bawah ini

Kemudian save dengan nama index.html, lalu tambagkan css nya di bawah ini

Jika sudah, save dan jalankan pada browser nya. Maka hasil sementara seperti gambar di bawah ini

Cara Menggunakan Property Float Pada CSS

Hasil di atas ini belum kita berikan property float, langkah berikutnya kita akan implementasikan Cara Menggunakan Property Float Pada CSS. Tambahkan float pada (class:articleLeft) dengan float:left dan (class:articleRight) dengan float:right

Cara Menggunakan Property Float Pada CSS

Jika sudah save dan refresh pada browser nya

Nah seperti yang kalian lihat pada (class:articleLeft) sudah bergeser kekiri dan (class:articleRight)  bergeser kekanan, karena masing-masing class saya berikan width 450px dimana parrent (tag <article>) memiliki width 900px maka (900 : 2 = 450) float akan berfungsi. Tetapi jika (class:articleLeft) dan (class:articleRight) saya berikan 455px maka float tidak akan berfungsi karena melebihi pembagian dari parrent (tag <article>) yang memiliki width 900px.

Cukup mudah bukan,,,?!?

Oke sekian dulu pada artikel kali ini tentang Cara Menggunakan Property Float Pada CSS, kita jumpa lagi di tutorial berikutnya. Terimakasih dan Sampai Jumpa. Semoga bermanfaat 🙂