Belajar menggunakan css float

belajar css

Kegunaan css float

Property float pada CSS digunakan untuk mengatur elemen agar bisa “float atau mengapung” ke kiri atau ke kanan. Css float sangat berguna untuk mengatur design tata letak pada halaman web. Elemen yang mempunyai position: absolute; tidak akan bekerja jika diberi style dengan property float, karena elemen “mengapung” sudah dikeluarkan dari aliran normal.

Jika beberapa elemen “float atau mengapung” ditempatkan bersebelahan, maka elemen yang lainnya akan ikut “mengapung” bersebelahan mengisi ruang horizontal yang tersisa.

Jika tidak ada cukup ruang untuk “mengapung”, itu akan digeser ke bawah sampai tidak ada lagi elemen “mengapung” tersisa. Kemungkinan nilai untuk property ini adalah:

  • left – mengapung ke kiri
  • right – mengapung ke kanan
  • none – Unsur tidak mengapung. Ini adalah default
  • inherit – Unsur mewarisi nilai mengapung dari induknya

Berikut gambaran CSS float:

Float right

Anda bisa mengatur property float agar “mengapung” ke arah kanan dengan nilai right.

Contoh:

Editor Online
  1. img {
  2. float: right;
  3. }

Float left

Anda bisa mengatur property float agar “mengapung” ke arah kiri dengan nilai left.

Contoh:

Editor Online
  1. img {
  2. float: left;
  3. }

Mematikan property float

Jika beberapa elemen “float atau mengapung” ditempatkan bersebelahan, maka elemen yang lainnya akan ikut “mengapung” bersebelahan mengisi ruang horizontal yang tersisa.

Dengan property clear Anda bisa mengatur menspesifikasikan elemen yang ikut mengapung apakah diperbolehkan atau tidak diperbolehkan (matikan).

Kemungkinan nilai property  clear adalah:

  • none – Memungkinkan elemen mengapung di kedua sisi. Ini adalah default
  • left – Tidak diperbolehkan elemen mengapung ke sisi kiri
  • right – Tidak diperbolehkan elemen mengapung ke sisi kanan
  • both – Tidak diperbolehkan elemen mengapung di kedua sisi kiri atau sisi kanan
  • inherit – Unsur mewarisi nilai dari elemen induknya

Contoh:

Editor Online
  1. #box6 {
  2. clear: left;
  3. }

Pada contoh diatas box yang bernomor 6 tidak mengapung ke sisi kiri mengikuti elemen yang lainnya, dikarenakan sudah diberi style clear: left;

Clearfix

Jika Anda menggunakan property float dan didalamnya ada elemen yang lebih tinggi dari elemen pembungkusnya. Maka Anda akan mendapatkan masalah, dimana elemen itu akan ke luar dari wadah.

Contoh:

Editor Online
  1. #clearfix {
  2. overflow: auto;
  3. }

Seperti pada contoh diatas Anda mengatasinya dengan property overflow: auto; agar elemen pembungkusnya bisa menampungnya. Property overflow: auto; bekerja dengan baik selama Anda dapat mengontrol margin dan padding, jika tidak Anda mungkin akan melihat scrollbar.

Dengan clearfix yang lebih modern akan lebih aman digunakan dan kode berikut digunakan untuk sebagian besar halaman web:

Contoh:

Editor Online
  1. #clearfix::after {
  2. content: ” “;
  3. clear: both;
  4. display: table;
  5. }

Membuat navigasi sederhana

Anda bisa memanfaatkan property float untuk membuat menu navigasi sederhana secara horizontal.

Contoh:

Editor Online
  1. ul {
  2. list-style-type: none;
  3. margin: 0;
  4. padding: 0;
  5. overflow: hidden;
  6. background-color: #2194e3;
  7. }
  8. li {
  9. float: left;
  10. }
  11. li a {
  12. display: inline-block;
  13. color: #ffffff;
  14. text-align: center;
  15. padding: 17px 15px;
  16. text-decoration: none;
  17. }
  18. li a:hover {
  19. background-color: #111;
  20. }

Membuat layout sederhana

Anda bisa memanfaatkan property float untuk membuat layout sederhana.

Contoh:

Editor Online
  1. #container {
  2. text-align: center;
  3. color: #ffffff;
  4. font-size: 22px;
  5. }
  6. #header {
  7. height: 100px;
  8. background-color: grey;
  9. }
  10. #content {
  11. width: 75%;
  12. height: 250px;
  13. background-color: green;
  14. float: left;
  15. }
  16. #sidebar {
  17. width: 25%;
  18. height: 250px;
  19. background-color: blue;
  20. float: right;
  21. }
  22. #footer {
  23. height: 50px;
  24. background-color: grey;
  25. clear: both;
  26. }

Leave a Reply

Your email address will not be published. Required fields are marked *