Belajar CSS Part 20 - Float dan Clear

CSS Layout - Float

float secara etimologi berarti "mengapung" atau "mengambang". Properti float digunakan untuk menentukan apakah sebuah elemen box harus mengapung (float) atau tidak. Selain itu, properti float juga dapat digunakan untuk mengatur posisi, tata letak (layout) dan style lainnya.

Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen setelahnya. Mengapung disini, berarti elemen yang mengalami float tersebut akan dipindahkan ke tepi paling kiri atau tepi paling kanan dari element induknya.

Elemen yang tidak mengalami float berada pada posisi normal, yaitu berada pada arah berlawanan dengan elemen yang mengelilinginya (bertumpuk dari atas kebawah atau dari kiri ke kanan). Sedangkan, elemen yang mengalami float tidak mengikuti kaidah sebagaimana semestinya. Properti float tidak bisa digunakan untuk elemen-elemen yang memiliki posisi absolute (position: absolute;).

Properti float memiliki value / nilai berikut:

left - elemen mengapung di sebelah kiri elemen induknya
right - elemen mengapung di sebelah kanan elemen induknya
none - elemen tidak mengapung (akan ditampilkan hanya di mana terjadi dalam teks). Float none ini adalah default
inherit - elemen mewarisi (inherit) nilai float dari elemen induknya

Dalam penggunaannya sederhana, properti float dapat digunakan untuk membungkus teks di sekitar gambar.

Contoh - float: right;

Contoh berikut menetapkan bahwa gambar mengapung ke kanan dalam teks.

Contoh

img {
    float: right;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Dalam contoh ini, gambar akan mengapung ke kanan di paragraf, dan teks dalam paragraf akan membungkus gambar. </ p>

<p><img src="nama_gambar.jpg" alt="nama_alternatif_gambar" style="width:170px;height:170px;margin-left:15px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

Hasilnya:

Contoh - float: left;

Contoh berikut menetapkan bahwa gambar mengapung ke kiri dalam teks:

Contoh

img {
    float: left;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p> Dalam contoh ini, gambar akan mengambang ke kiri di paragraf, dan teks dalam paragraf akan membungkus gambar. </ p>

<p><img src="nama_gambar.jpg" alt="nama_alternatif_gambar" style="width:170px;height:170px;margin-right:15px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

Hasilnya:

Contoh - float: none;

float:none; digunakan untuk menentukan bahwa sebuah elemen tidak boleh mengapung (float).

Contoh

img {
    float: none;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p> Dalam contoh ini, gambar akan ditampilkan di tempat yang tepat di teks (float: none;). </ p>

<p><img src="nama_gambar.jpg" alt="nama_alternatif_gambar" style="width:170px;height:170px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

Hasilnya:

CSS Layout - Clear

Properti CSS clear merupakan properti yang digunakan untuk membersihkan elemen yang sebelumnya telah mengalami float. Sehingga, elemen yang di-clear akan berpisah dari elemen yang mengalami float dan akan berpindah pada baris baru.

Properti clear memiliki value / nilai berikut:

none - memungkinkan elemen mengapung (float) di kedua sisi. Ini adalah default.
left - tidak ada elemen mengapung (float) di sisi kiri
right - tidak ada elemen mengapung (float) di sisi kanan
both - tidak ada elemen mengapung (float) di kedua sisi (kiri atau kanan)
inherit - elemen mewarisi nilai yang clear dari induknya

Cara paling umum untuk menggunakan properti clear adalah setelah kita menggunakan properti float pada elemen.

Contoh berikut membersihkan float ke kiri. Berarti tidak ada elemen mengambang (float) di sisi kiri elemen (div):

Contoh

.div1 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div2 {
    border: 1px solid red;
}

.div3 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div4 {
    border: 1px solid red;
    clear: left;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Tanpa menggunakan clear</h2>
<div class="div1">div1</div>
<div class = "div2"> div2 - Perhatikan bahwa div2 setelah div1 dalam kode HTML. Namun, karena div1 mengapung ke kiri, teks dalam div2 mengalir di sekitar div1. </ Div>
<br><br>

<h2>Menggunakan clear</h2>
<div class="div3">div3</div>
<div class = "div4"> div4 - Di sini, clear: letf; memindahkan div4 ke bawah div3 mengambang. Nilai "left" artinya memberikan clear (menghilangkan float) terhadap elemen yang mengambang (float) ke kiri. Kita juga dapat memberikan clear "right" dan "both" (keduanya). </ Div>

</body>
</html>

Hasilnya:

Menggunakan "clearfix"

Jika sebuah elemen lebih tinggi dari elemen yang induknya, dan elemen tersebut mengambang (float), maka akan "meluap" di luar wadahnya.

Contoh

div {
    border: 3px solid #4CAF50;
    padding: 5px;
}

.img1 {
    float: right;
}

.clearfix {
    overflow: auto;
}

.img2 {
    float: right;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p> Dalam contoh ini, gambar lebih tinggi daripada elemen yang memuatnya, dan itu mengambang, sehingga meluap di luar wadahnya: </ p>

<div>
<img class="img1" src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

<p style = "clear: right"> Tambahkan kelas clearfix dengan overflow: auto; ke elemen yang memuatnya, untuk memperbaiki masalah ini: </ p>

<div class="clearfix">
<img class="img2" src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

</body>
</html>

Hasilnya:

Fungsi Lain Properti Float
Selain yang di jelaskan di atas, berikut ada beberapa fungsi lain dari properti float:

Grid of Boxes / Equal Width Boxes
Memudahkan untuk mengatur kotak (box) agar saling berdampingan satu sama lain
Contoh

* {
    box-sizing: border-box;
}

.box {
    float: left;
    width: 33.33%;
    padding: 50px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Kotak Grid</h2>
<p>Menerapkan float di sisi masing-masing kotak:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
    <p>Some text inside the box.</p>
  </div>
  <div class="box" style="background-color:#ccc">
    <p>Some text inside the box.</p>
  </div>
  <div class="box" style="background-color:#ddd">
    <p>Some text inside the box.</p>
  </div>
</div>

<p> Perhatikan bahwa pada contoh ini juga menggunakan clearfix hack untuk menjaga aliran tata letak, dan itu menambahkan properti box-sizing untuk memastikan bahwa kotak tidak rusak karena tambahan padding. Coba hapus kode ini untuk melihat efeknya. </ P>

</body>
</html>

Hasilnya:

Properti box-sizing? Kita dapat dengan mudah membuat tiga kotak mengambang berdampingan. Namun, ketika kita menambahkan sesuatu yang menambah lebar setiap kotak (misalnya padding atau border), maka kotak akan rusak. Properti box-sizing memungkinkan kita untuk memasukkan padding dan batas lebar total kotak (dan tinggi), memastikan bahwa padding tetap berada di dalam kotak dan tidak pecah.

Grid box juga dapat digunakan untuk menampilkan gambar agar berdampingan.
Contoh

* {
    box-sizing: border-box;
}

.img-container {
    float: left;
    width: 33.33%;
    padding: 5px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Gambar Mengambang</h2>
<p>Menerapkan float di tiap sisi:</p>

<div class="clearfix">
  <div class="img-container">
    <img src="nama_gambar.jpg" alt="nama_alternatif" style="width:100%">
  </div>
  <div class="img-container">
    <img src="nama_gambar.jpg" alt="nama_alternatif" style="width:100%">
  </div>
  <div class="img-container">
    <img src="nama_gambar.jpg" alt="nama_alternatif" style="width:100%">
  </div>
</div>

<p> Perhatikan bahwa pada contoh ini juga menggunakan clearfix hack untuk menjaga aliran tata letak, dan itu menambahkan properti box-sizing untuk memastikan bahwa kotak tidak rusak karena tambahan padding. Coba hapus kode ini untuk melihat efeknya. </ P>

</body>
</html>

Hasilnya:

Equal Height Boxes

Seperti pada contoh sebelumnya, bawa menetapkan float sehingga kotak bisa berdampingan dengan lebar yang sama sangatlah mudah. Namun, tidak mudah untuk membuat kotak mengambang dengan ketinggian yang sama. Akan tetapi, kita tetap dapat menetapkan tinggi tetap, seperti pada contoh di bawah ini:
Contoh

* {
    box-sizing: border-box;
}

.box {
    float: left;
    width: 50%;
    padding: 50px;
    height: 300px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Equal Height Boxes</h2>
<p>Kotak mengambang dengan ketinggian yang sama:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
    <h2>Box 1</h2>
    <p>Some content, some content, some content</p>
  </div>
  <div class="box" style="background-color:#ccc">
    <h2>Box 2</h2>
    <p>Some content, some content, some content</p>
    <p>Some content, some content, some content</p>
    <p>Some content, some content, some content</p>
  </div>
</div>

<p> Contoh ini tidak terlalu fleksibel. Tidak apa-apa untuk menggunakan CSSheight  jika kita dapat menjamin bahwa kotak akan selalu memiliki jumlah konten yang sama di dalamnya, tetapi itu tidak selalu benar. Jika kita mencoba contoh di atas pada ponsel (atau mengubah ukuran jendela browser), kita akan melihat bahwa isi kotak kedua akan ditampilkan di luar kotak. </ P>

</body>
</html>

Hasilnya:

Memudahkan pembuatan menu secara horizontal
Menggunakan float untuk membuat menu horizontal.
Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.active {
    background-color: red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Mengatur layout halaman secara keseluruhan
Demikian juga dengan mengatur seluruh tata letak halaman web, gunakan properti float.
Contoh

* {
    box-sizing: border-box;
}
.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
}

.menu li:hover {
    background-color: #0099cc;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>Satu</li>
      <li>Dua</li>
      <li>Tiga</li>
      <li>Empat</li>
    </ul>
  </div>

  <div class="column content">
    <h1>Teks bahasa asing:</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

Hasilnya: