CSS - Float dan Clear

Ketika kita berbicara tentang tampilan, cukup umum untuk berbicara sekitar dua properti lainnya yang tak kalah penting, float dan clear. Secara default, saat browser meload elemen pada halaman, dimulai dari sudut kiri atas. Dan itu akan memperlihatkan situasi web anda, jadi melihat situs Anda, oh yang terbaca pertama kali adalah elemen ini, oh, yang berikutnya adalah blok jadi browser lebih baik meletakkannya di bawahnya. Dan itu begitulah terus menerus cara pembacaan dan peletakkan dari browser. Jadi jika browser Anda sangat besar, Anda bisa muat lebih banyak elemen span di samping satu sama lain, jika kecil, yang nampak pun akan kecil.

Maka float berfungsi baik memungkinkan Anda benar-benar memposisikan ulang hal-hal, dan dikatakan oleh browser anda, saya ingin jenis float anda ini terletak di mana saja, dan jika float benar, saya ingin Anda taruh sejauh yang Anda bisa. Jika saya katakan float kiri, saya ingin Anda untuk meletakkannya sejauh yang Anda bisa. Unsur-unsur lain pada dasarnya mirip satu sama lain, dan ketika Anda menggunakan float, mereka tidak akan tumpang tindih tetapi semuanya akan terlihat sedikit kacau. Dan ketika Anda menambahkan float lagi, Anda mempengaruhi elemen lainnya, karena elemen Anda membutuhkan untuk tahu ke mana Anda ingin menkreasikan page anda. Itu sebabnya kami punya ini properti tambahan yang disebut clear.

Disini sudah agak jelas, properti float untuk membuat suatu elemen atau objek berada di kanan, atau di kiri sesuai yang anda inginkan dan dapat memberi tempat kosong untuk diisi oleh elemen lain. float anda gunakan ketika menentukan apakah sebuah elemen box apakah harus mengapung (float) atau tidak. Elemen tersebut bisa diposisikan seakan-akan berada mengapung diantara elemen setelahnya. Elemen yang mengalami float tersebut akan dipindahkan ke tepi paling kiri (float:left) atau tepi paling kanan (float:right) dari element induknya. Lihat contoh:

<html>
<head>
    <style>
        body{
          background-color:yellow;
        }     
        img {
            float: right;
        }
     </style>
</head>

<body>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQez9qTMxQpskwWAgF6WMQMB-QTbyH_BGeIr4CbQFlOPrtKhEu_5g" width="150">
      <p> Ini contoh gambar dengan elemen float dengan value right </p>
</body>
</html>  
Hasilnya:

float1

Nah sekarang, Karena kadang-kadang ketika Anda coding, Anda hanya ingin memastikan bahwa hal-hal yang tidak mengapung ke kiri atau kanan Anda. Anda benar-benar ingin memilikinya ruang itu semua untuk diri Anda sendiri, dalam hal ini Anda dapat menggunakan value pada float: left | right | none | inherit; Secara default float memiliki nilai none.

Sedangkan properti clear digunakan untuk menghilangkan efek float dari element sebelumnya. Disini element yang di-clear berpisah dari element yang mengalami float kemudian berpindah pada baris baru. Syntax CSS Clear pun menggunakan value none | left | right | both | initial | inherit;

Lihat contoh:

<html>
<head>
    <style>
        body{
          background-color:yellow;
        }     
        img {
            float: right;
        }
        p{
          clear:right;
        }

    </style>
</head>

<body>
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQez9qTMxQpskwWAgF6WMQMB-QTbyH_BGeIr4CbQFlOPrtKhEu_5g" width="150">
    <p> Contoh gambar elemen float namun diberi nilai clear duntuk menghilangkan efek floatnya </p>
    Terlihat elemen pindah ke baris bawah atau garis baru
</body>
</html>       
Hasilnya:

float2

Jadi clear: right; untuk memastikan tidak terjadi floating sebelah kanan. Clear: left; juga untuk memastikan tidak terjadi floating sebelah kiri Jadi mari anda lanjutkan uji coba dan lihat hasil praktek penulisan kode anda dengan menggunakan float dan clear ini. Anda juga bias menguji code sebelumnya, display inline, dll dan menggabungkan kode float dan clear dan lihat beginilah hasil situs webnya.

Jadi silakan,lakukan apa yang selalu kami lakukan dan uji cobalah terus dengan penulisan code sebelumnya sampai Anda sendiri mendapatkan gagasan tentang apa yang kadang para webmaster lakukan. Seiring waktu, Anda akan mulai mencari tahu, Anda juga ingin buat layout web yang bagaimana.