Halaman ini khusus berisi contoh penggunaan float yang umum digunakan pada sebuah coding.
Dengan menggunakan properti float, mudah untuk membuat kotak mengapung secara berjajar:
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .box { float: left; width: 33.33%; padding: 50px; } .clearfix::after { content: ""; clear: both; display: table; } </style> </head> <body> <h2>Grid pada box</h2> <p>Box mengapung secara berjajar:</p> <div class="clearfix"> <div class="box" style="background-color:#bbb"> <p>Teks dalam box.</p> </div> <div class="box" style="background-color:#ccc"> <p>Teks dalam box.</p> </div> <div class="box" style="background-color:#ddd"> <p>Teks dalam box.</p> </div> </div> <p>Perhatikan code ini juga menggunakan clearfix hack untuk menangani flow layout, dan juga menambahkan properti box-sizing untuk memastikan bahwa box tidak rusak karena penambahan padding. Coba hapus kode box-sizing untuk melihat efeknya.</p> </body> </html>
Apa itu box-sizing?
Kita dapat dengan mudah membuat tiga box mengapung dengan posisi berjajar. Namun, ketika kita ingin menambahkan ukuran lebih besar atau lebar setiap box (misalnya padding atau border), box akan rusak. Properti box-sizing memungkinkan kita untuk menyertakan padding dan border ke dalam total width dan height box, dan memastikan bahwa padding tetap berada di dalam box dan box tidak rusak.
Section Artikel
Gambar Berjajar
Grid box juga dapat digunakan untuk menampilkan gambar secara berjajar.
Berikut contoh penggunaanya:
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Grid Gambar</h2>
<p>Float Gambar berjajar:</p>
<div class="clearfix">
<div class="img-container">
<img src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Italy" style="width:100%">
</div>
<div class="img-container">
<img src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Forest" style="width:100%">
</div>
<div class="img-container">
<img src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Mountains" style="width:100%">
</div>
</div>
<p>Perhatikan code ini juga menggunakan clearfix hack untuk menangani flow layout, dan juga menambahkan properti box-sizing untuk memastikan bahwa box tidak rusak karena penambahan padding. Coba hapus kode box-sizing untuk melihat efeknya.</p>
</body>
</html>
Menyamakan Tinggi Box
Dalam contoh sebelumnya, telah dijelasakan cara mengapungkan box secara berjajar dengan lebar yang sama. Tetapi, membuat box terapung dengan ketinggian yang sama tidaklah mudah. Solusi untuk memperbaiki hal tersebut dengan cepat adalah dengan mengatur ketinggian (height) tetap, seperti pada contoh di bawah ini:
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 50%;
padding: 50px;
height: 300px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Menyamakan Height Box</h2>
<p>Box mengapung dengan tinggi yang sama:</p>
<div class="clearfix">
<div class="box" style="background-color:#bbb">
<h2>Box 1</h2>
<p>Ini konten, ini konten, ini konten</p>
</div>
<div class="box" style="background-color:#ccc">
<h2>Box 2</h2>
<p>Ini konten, ini konten, ini konten</p>
<p>Ini konten, ini konten, ini konten</p>
<p>Ini konten, ini konten, ini konten</p>
</div>
</div>
<p>Contoh ini tidak terlalu fleksibel. Tidak masalah menggunakan tinggi default CSS jika dapat menjamin setiap box akan selalu memiliki jumlah konten yang sama di dalamnya, tetapi biasanya tidak selalu demikian. Jika Anda mencoba contoh di atas pada ponsel (atau mengubah ukuran jendela browser), Anda akan melihat bahwa konten box kedua akan ditampilkan di luar box. </p>
<p> Kembali ke tutorial dan temukan solusi lain, jika ini bukan yang Anda inginkan.</p>
</body>
</html>
Contoh ini tidak terlalu fleksibel. Tidak masalah menggunakan tinggi default CSS jika dapat menjamin setiap box akan selalu memiliki jumlah konten yang sama di dalamnya, tetapi biasanya tidak selalu demikian. Jika Anda mencoba contoh di atas pada ponsel (atau mengubah ukuran jendela browser), Anda akan melihat bahwa konten box kedua akan ditampilkan di luar box. Di sinilah CSS3 Flexbox akan sangat berguna – karena dapat meregangkan box secara otomatis menjadi box terpanjang.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container .box {
background-color: #f1f1f1;
width: 50%;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Box Fleksibel</h1>
<div class="flex-container">
<div class="box">Kotak 1 - Ini adalah teks untuk memastikan bahwa konten menjadi sangat tinggi. Ini adalah teks untuk memastikan bahwa konten menjadi sangat tinggi.</div>
<div class="box">Kotak 2 - Tinggiku akan mengikuti Kotak 1.</div>
</div>
<p>Coba ubah ukuran jendela browser untuk melihat tata letak yang fleksibel.</p>
<p><strong>Note:</strong> Flexbox tidak mendukung Internet Explorer 10 atau versi sebelumnya.</p>
</body>
</html>
Satu-satunya masalah dengan Flexbox adalah Flexbox tidak berfungsi di Internet Explorer 10 atau versi sebelumnya.
Menggunakan float pada list hyperlink untuk membuat menu secara horizontal:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</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>
Contoh Web Layout
Penggunaan float juga sangat umum untuk mengatur seluruh tata letak (layout) web.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
* {
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;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="clearfix">
<div class="column menu">
<ul>
<li>Penerbangan</li>
<li>Kota</li>
<li>Pulau</li>
<li>Makanan</li>
</ul>
</div>
<div class="column content">
<h1>Kota</h1>
<p>Chania adalah ibu kota wilayah Chania di pulau Crete. Kota Chania dibagi menjadi dua bagian, kota tua dan kota modern.</p>
<p>Anda akan mempelajari lebih lanjut tentang tata letak web dan halaman web responsif di bab selanjutnya.</p>
</div>
</div>
<div class="footer">
<p>Hubungi Kami</p>
</div>
</body>
</html>
