Apa itu Floating di CSS?

Sederhananya properti float dapat membuat elemen berada pada sebelah kanan atau kiri. Saat diterapkan pada elemen inline, properti float juga memungkinkan elemen di sekitarnya mengelilingi elemen tersebut (wrap). 

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <style>

  5.        .container {

  6.            width: 800px;

  7.            border: 4px solid black;

  8.            padding: 10px;

  9.        }

  10.  

  11.        img {

  12.            float: left;

  13.            margin: 10px;

  14.        }

  15.    </style>

  16. </head>

  17. <body>

  18. <div class="container">

  19.    <img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">

  20.    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet asperiores commodi corporis doloribus eum ipsum obcaecati pariatur quam quo, voluptatum? A, assumenda atque delectus dolore nam natus neque quisquam repudiandae?</p>

  21.    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At deserunt illum inventore numquam officia recusandae, sit! Ab asperiores delectus dolor, eius est explicabo impedit ipsa ipsum itaque mollitia neque nihil nisi officia praesentium sint! Accusantium libero obcaecati provident qui? Error!</p>

  22.    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam debitis dolorem eaque eius eos error eum ex facilis fuga ipsa iste iusto mollitia nam natus necessitatibus praesentium quam qui quod, rerum sed sequi sint voluptates? Atque enim, ex facere fugiat ipsum mollitia quos sunt. At, autem commodi dolorum eos, est expedita, incidunt molestias nobis nostrum officia porro reiciendis saepe voluptatum.</p>

  23. </div>

  24. </body>

  25. </html>


Berkas di atas, jika kita buka melalui browser akan tampak seperti gambar ini:
201912062237173d1e13a702b05853380e5996529b41a0.png
Selain dalam membuat text wrapping. Float juga merupakan salah satu teknik dalam membuat layout website. Teknik ini masih banyak digunakan oleh developer karena sangat mudah dipahami dan tergolong mudah untuk multiple column seperti gambar berikut
201912062237541f693b762ab4e8a828f3876f175a61d4.png
Hal ini dapat dilakukan dengan mudah menggunakan properti float, karena nilai dari properti ini adalah left dan right. Nilai tersebut menunjukan posisi elemen harus diletakkan. Contoh penerapannya seperti berikut ini:
<!doctype html>
<html lang="en">
<head>
   <style>
       * {
           /* digunakan untuk menghapus seluruh padding dan margin standar yang diberikan browser pada elemen */
           margin: 0;
           padding: 0;

           /* Menggunakan border-box dalam perhitungan dimensi box-nya */
           box-sizing: border-box;
       }

       .container {
           width: 800px;
           height: 400px;
           border: 1px solid black;
           margin: 0 auto;
       }

       .left-content {
           text-align: center;
           line-height: 400px;
           width: 30%;
           height: 100%;
           background-color: #00c7ed;

           /* digunakan untuk memindahkan posisi elemen ke sisi kiri container */
           float: left;
       }

       .right-content {
           text-align: center;
           line-height: 400px;
           width: 70%;
           height: 100%;
           background-color: #60d0a8;

           /* digunakan untuk memindahkan posisi elemen ke sisi kanan container */
           float: right;
       }
   </style>
</head>
<body>
<div class="container">
   <div class="left-content">
       <h3>Left Content</h3>
   </div>
   <div class="right-content">
       <h3>Right Content</h3>
   </div>
</div>
</body>
</html>
Berkas di atas jika kita buka pada browser akan tampak seperti berikut:

20191206223918f512f632b167ea1f4544cb9825aadeb9.png
Dari contoh di atas, kita bisa melihat pada selector .left-content dan .right-content ditetapkan properti float dengan nilai left dan right, sehingga elemen tersebut dapat diposisikan secara bersebelahan. 
Ketika menggunakan properti float jangan lupa menentukan ukuran lebar dari propertinya, karena nilai dari lebar menentukan seberapa banyak ruang yang dicakup oleh elemen. Pada contoh di atas kita menetapkan nilai 30% untuk konten kiri dan 70% untuk konten sebelah kanan.
Lantas jika nilainya hanya left dan right, bagaimana jika ada lebih dari dua kolom dalam menyusun layout? Hal tersebut sangat mudah dilakukan. Kita hanya perlu menetapkan nilai left pada ketiga kolomnya, lantas kolom akan tampil bersebelahan sesuai urutan penulisan elemen.
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.    <style>
  5.        * {
  6.            /* digunakan untuk menghapus seluruh padding dan margin standar yang diberikan browser pada elemen */
  7.            margin: 0;
  8.            padding: 0;
  9.  
  10.            /* Menggunakan border-box dalam perhitungan dimensi box-nya */
  11.            box-sizing: border-box;
  12.        }
  13.  
  14.        .container {
  15.            width: 800px;
  16.            height: 400px;
  17.            border: 1px solid black;
  18.            margin: 0 auto;
  19.        }
  20.  
  21.        .left-content {
  22.            text-align: center;
  23.            line-height: 400px;
  24.            width: 33.3%;
  25.            height: 100%;
  26.            background-color: #00c7ed;
  27.            float: left;
  28.        }
  29.  
  30.        .center-content {
  31.            text-align: center;
  32.            line-height: 400px;
  33.            width: 33.3%;
  34.            height: 100%;
  35.            background-color: #d0b541;
  36.            float: left;
  37.        }
  38.  
  39.        .right-content {
  40.            text-align: center;
  41.            line-height: 400px;
  42.            width: 33.3%;
  43.            height: 100%;
  44.            background-color: #60d0a8;
  45.            float: left;
  46.        }
  47.    </style>
  48. </head>
  49. <body>
  50. <div class="container">
  51.    <div class="left-content">
  52.        <h3>Left Content</h3>
  53.    </div>
  54.    <div class="center-content">
  55.        <h3>Center Content</h3>
  56.    </div>
  57.    <div class="right-content">
  58.        <h3>Right Content</h3>
  59.    </div>
  60. </div>
  61. </body>
  62. </html>

2019120622412183354a8d3ab73bccd62ce1d1b31bb708.png

Komentar

Posting Komentar