Referensi Semua Properti Float CSS

box-sizing : Digunakan untuk menentukan lebar dan tinggi suatu elemen. Apakah harus menggunakan padding dan border, atau tidak
clear : Digunakan untuk menentukan apa yang akan terjadi dengan elemen yang berada di sebelah elemen float
float : Digunakan untuk menentukan apakah suatu elemen harus mengapung ke kiri, kanan, atau tidak sama sekali
overflow : Digunakan untuk menentukan apa yang terjadi jika konten melebar keluar dari kotaknya
overflow-x : Digunakan untuk menentukan apa yang harus dilakukan dengan tepi kiri/kanan konten jika area konten tidak mencukupi
overflow-y : Digunakan untuk menentukan apa yang harus dilakukan dengan tepi atas/bawah konten jika area konten tidak mencukupi

Properti CSS box-sizing

Contoh

Pada contoh dibawah ini diperlihatkan penggunaan box-sizing beserta properti padding dan border, width dan height di setiap elemen :

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  box-sizing: content-box;  
  width: 300px;
  height: 100px;
  padding: 30px;  
  border: 10px solid blue;
}

#example2 {
  box-sizing: border-box;
  width: 300px;
  height: 100px;
  padding: 30px;  
  border: 10px solid blue;
}
</style>
</head>
<body>

<h1>Properti box-sizing</h1>
<p>Mendefinisikan cara menghitung lebar dan tinggi elemen, apakah harus menyertakan padding dan border, atau tidak.</p>

<h2>box-sizing: content-box (default):</h2>
<p>Lebar dan tinggi hanya berlaku untuk konten elemen:</p>
<div id="example1">Div ini memiliki lebar 300px. Tapi lebar totalnya adalah 300px + 20px (border kiri dan kanan) + 60px (padding kiri dan kanan) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>Lebar dan tinggi berlaku untuk semua bagian elemen: konten, padding , dan border:</p>
<div id="example2">Di sini, lebar totalnya adalah 300px!</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti box-sizing dapat menentukan cara menghitung lebar dan tinggi suatu elemen. Apakah harus menyertakan padding dan border, atau tidak.

Nilai properti

content-box : Properti width dan height (dan properti min/max) hanya dihitung dari lebar dan panjang konten. Border dan padding tidak termasuk dalam hitungan. Ini adalah nilai default.
border-box : Properti width dan height (dan properti min/maks) mencakup lebar dan panjang konten ditambah dengan nilai padding dan border.
initial : Mengatur properti ini ke nilai defaultnya.
inherit : Mewarisi properti ini dari elemen induknya.

Contoh

Pada contoh dibawah ini menentukan dua border kotak secara berdampingan:

<!DOCTYPE html>
<html>
<head>
<style> 
div.container {
  width: 100%;
  border: 2px solid black;
}

div.box {
  box-sizing: border-box;
  width: 50%;
  border: 5px solid red;
  float: left;
}
</style>
</head>
<body>

<div class="container">
<div class="box">Div ini menempati bagian kiri</div>
<div class="box">Div ini menempati bagian kanan</div>
<div style="clear:both;"></div>
</div>

</body></html>

Jalankan Contoh

Contoh

Mengatur “box-sizing“:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

#example1 {
  width: 300px;
  padding: 40px;  
  border: 15px solid blue;
}

#example2 {
  width: 300px;
  padding: 10px;  
  border: 2px solid red;
}
</style>
</head>
<body>

<h1>box-sizing universal</h1>

<p>Karena hasil penggunaan "box-sizing: border-box" jauh lebih baik, banyak developer ingin semua elemen di halaman mereka ditampilkan dengan cara ini.
Style box-sizing: border-box memastikan semua elemen diukur dengan cara yang lebih mudah.
Properti width yang Anda tetapkan adalah lebar yang Anda dapatkan, tanpa harus melakukan perhitungan rumit yang berasal dari lebar tambahan yang berasal dari beberapa properti lain.
Menerapkan ini ke semua elemen aman dan bijaksana:</p>

<div id="example1">Div ini memiliki lebar 300px, tidak peduli padding atau border!</div>
<br>
<div id="example2">Div ini juga memiliki lebar 300px, tidak peduli padding atau border!</div>

</body></html>

Jalankan Contoh

Properti CSS clear

Contoh

Elemen <p> didorong di bawah elemen float kiri (elemen <p> tidak mengizinkan elemen float di sisi kiri):

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}

p.clear {
  clear: left;
}
</style>
</head>
<body>

<h1>Properti clear</h1>

<img src="logocss.png" width="100" height="132">

<p class="clear">Ini adalah beberapa teks. Ini beberapa teks. Ini beberapa teks. Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.</p>
<p><strong>Hapus class "clear" untuk melihat efeknya.</strong></p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti clear mengontrol aliran di sebelah elemen float.

Properti clear dapat menentukan apa yang akan terjadi terhadap elemen yang berada di sebelah elemen float.

Tips: Harus memahami cara menggunakan properti float.

Nilai properti

none : Secara default. Elemen tidak didorong di bawah elemen float kiri atau kanan
left : Elemen didorong di bawah elemen float kiri
right : Elemen didorong di bawah elemen float kanan
both : Elemen didorong di bawah elemen float kiri dan kanan
initial : Mengatur properti ini ke nilai defaultnya
inherit : Mewarisi properti ini dari elemen induknya

Properti CSS float

Contoh

Pada contoh di bawah ini mengatur posisi gambar mengapung ke sisi kanan :

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>
<h1>Properti float</h1>

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

<p><img src="pineapple.jpeg" alt="Nanas" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. 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. Di at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Bilangan bulat fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti float dapat menentukan apakah suatu elemen harus melayang/mengapung ke kiri, kanan, atau tidak sama sekali.

Nilai properti

none : Elemen tidak mengapung, (akan ditampilkan tepat di tempat kemunculannya di tulisan)
left : Elemen mengapung di sebelah kiri wadahnya
right : Elemen mengapung di sebelah kanan wadahnya
initial : Mengatur properti ini ke nilai defaultnya
inherit : Mewarisi properti ini dari elemen induknya

Contoh

Pada contoh di bawah ini mengatur gambar mengapung ke kiri:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}
</style>
</head>
<body>
<h1>Properti float</h1>

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

<p><img src="pineapple.jpeg" alt="Nanas" style="width:170px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. 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. Di at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Bilangan bulat fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body></html>

Jalankan Contoh

Contoh

Mengatur gambar ditampilkan tepat di tempatnya terhadap tulisan (menggunakan properti float: none):

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: none;
}
</style>
</head>
<body>
<h1>Properti float</h1>

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

<p><img src="pineapple.jpeg" alt="Nanas" style="width:170px;height:170px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. 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. Di at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Bilangan bulat fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body></html>

Jalankan Contoh

Contoh

Mengatur huruf pertama paragraf mengapung ke kiri dan memberi style pada huruf:

<!DOCTYPE html>
<html>
<head>
<style>
span {
  float: left;
  width: 0.7em;
  font-size: 400%;
  font-family: algerian, courier;
  line-height: 80%;
}
</style>
</head>
<body>

<p><span>T</span>ini beberapa teks.
Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
</p>

</body></html>

Jalankan Contoh

Contoh

Gunakan float dengan daftar hyperlink untuk membuat menu menjadi horizontal:

<!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;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">Tentang</a></li>
</ul>

</body></html>

Jalankan Contoh

Contoh

Gunakan float untuk membuat halaman beranda dengan header, footer, konten kiri dan konten utama:

<!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>Makanannya</li>
</ul>
</div>

<div class="column content">
<h1>Kota</h1>
<p>Chania adalah ibu kota wilayah Chania di pulau Kreta. Kota ini dapat 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>Teks Footer</p>
</div>

</body></html>

Jalankan Contoh

Contoh

Tidak membuat elemen mengapung di sisi kiri atau kanan dari elemen <p>:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}

p.clear {
  clear: both;
}
</style>
</head>
<body>

<img src="logocss.png" width="100" height="132">
<p>Ini adalah beberapa teks. Ini beberapa teks. Ini beberapa teks. Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.</p>
<p class="clear">Ini juga beberapa teks. Ini juga beberapa teks. Ini juga beberapa teks. Ini juga beberapa teks. Ini juga beberapa teks. Ini juga beberapa teks.</p>
<p><strong>Hapus class "clear" untuk melihat efeknya.</strong></p>

</body></html>

Jalankan Contoh

Contoh

Jika elemen mengambang lebih tinggi dari elemen yang menampungnya, elemen tersebut akan melebar di luar wadahnya. Dimungkinkan untuk memperbaikinya dengan “clearfix hack“:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

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

.img2 {
  float: right;
}
</style>
</head>
<body>
<h1>clearfix hack</h1>

<p>Gambar mengapung lebih tinggi dari elemen yang memuatnya, sehingga meluap di luar elemen wadahnya.</p>
<div>
<img class="img1" src="pineapple.jpeg" alt="Nanas" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Phasellus imperdiet, nulla et dictum interdum...</div>

<p style="clear:right">Tambahkan clearfix hack ke elemen wadah, untuk memperbaiki masalah ini.</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpeg" alt="Nanas" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. Phasellus imperdiet, nulla et dictum interdum...</div>

</body></html>

Jalankan Contoh

Properti CSS overflow

Contoh

Pada contoh di bawah ini menampilkan nilai properti overflow yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: scroll;
}

div.ex2 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: hidden;
}

div.ex3 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: auto;
}

div.ex4 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: clip;
}

div.ex5 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: visible;
}
</style>
</head>
<body>

<h1>Properti overflow</h1>

<h2>overflow: scroll</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: hidden</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: auto</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: clip</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow: visible (default):</h2>
<div class="ex5">Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti overflow dapat menentukan apa yang akan terjadi jika konten melebar keluar dari kotak/wadahnya.

Properti ini menentukan apakah akan konten akan dipotong atau menambahkan scrollbar saat konten terlalu besar untuk dimuat di area tertentu.

Catatan: Properti overflow hanya berfungsi untuk elemen blok dengan ketinggian tertentu.

Nilai properti

visible : Overflow tidak terpotong. Konten ditampilkan di luar kotak penampungnya. Ini adalah nilai default
hidden : Overflow terpotong, dan konten akan terpotong dan sisa konten tidak akan terlihat.
clip : Overflow terpotong, dan konten akan terpotong dan sisa konten tidak akan terlihat. Scrollbar juga tidak diperlihatkan
scroll : Overflow terpotong, dan konten akan terpotong dan sisa konten tidak akan terlihat, tetapi scrollbar ditambahkan untuk melihat sisa konten yang terpotong
auto : Jika overflow terpotong, dan konten akan terpotong dan sisa konten tidak akan terlihat, tetapi scrollbar ditambahkan hanya apabila memang ada konten yang terpotong
initial : Mengatur properti ini ke nilai defaultnya.
inherit : Mewarisi properti ini dari elemen induknya.

Properti CSS overflow-x

Contoh

Pada contoh di bawah ini menampilkan nilai properti overflow-x yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style> 
div.ex1 {
  background-color: lightblue;
  width: 40px;
  overflow-x: scroll;
}

div.ex2 {
  background-color: lightblue;
  width: 40px;
  overflow-x: hidden;
}

div.ex3 {
  background-color: lightblue;
  width: 40px;
  overflow-x: auto;
}

div.ex4 {
  background-color: lightblue;
  width: 40px;
  overflow-x: visible;
}
</style>
</head>
<body>

<h1>Properti overflow-x</h1>

<h2>overflow-x: scroll</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elite...</div>

<h2>overflow-x: hidden</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetuer adipiscing elite..</div>

<h2>overflow-x: auto</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetuer adipiscing elite...</div>

<h2>overflow-x: visible (default):</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetuer adipiscing elite...</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti overflow-x apakah konten akan dipotong, atau menambahkan scrollbar, atau menampilkan konten melebar ke luar kotak penampung, saat lebar konten di sisi kanan dan kiri lebih besar daripada lebar kotak penampung.

Nilai properti

visible :Konten tidak terpotong, dan akan ditampilkan melebar keluar dari tepi kiri dan kanan kotak penampung. Ini nilai default
hidden : Konten terpotong dan tidak ada scrollbar yang disediakan
scroll : Konten dipotong dan scrollbar disediakan
auto : Scrollbar yang disediakan apabila memang lebar konten melebihi lebar kotak penampung
initial : Mengatur properti ini ke nilai defaultnya
inherit : Mewarisi properti ini dari elemen induknya

Properti CSS overflow-y

Contoh

Pada contoh di bawah ini menampilkan nilai overflow-y yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style> 
div.ex1 {
  background-color: lightblue;
  height: 40px;
  width: 200px;
  overflow-y: scroll;
}

div.ex2 {
  background-color: lightblue;
  height: 40px;
  width: 200px;  
  overflow-y: hidden;
}

div.ex3 {
  background-color: lightblue;
  height: 40px;
  width: 200px;  
  overflow-y: auto;
}

div.ex4 {
  background-color: lightblue;
  height: 40px;
  width: 200px;  
  overflow-y: visible;
}
</style>
</head>
<body>

<h1>Properti overflow-y</h1>

<h2>overflow-y: scroll</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

<h2>overflow-y: hidden</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

<h2>overflow-y: auto</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

<h2>overflow-y: visible (default):</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti overflow-x apakah konten akan dipotong, atau menambahkan scrollbar, atau menampilkan konten melebar ke luar kotak penampung, saat tinggi konten di sisi atas dan bawah lebih besar daripada tinggi kotak penampung.

Nilai properti

visible :Konten tidak terpotong, dan akan ditampilkan melebar keluar dari tepi atas dan bawah kotak penampung. Ini nilai default
hidden : Konten terpotong dan tidak ada scrollbar yang disediakan
scroll : Konten dipotong dan scrollbar disediakan
auto : Scrollbar yang disediakan apabila memang tinggi konten melebihi tinggi kotak penampung
initial : Mengatur properti ini ke nilai defaultnya
inherit : Mewarisi properti ini dari elemen induknya

Tutorial sebelumnya : Contoh Penggunaan Properti Float Dengan CSS
Tutorial setelahnya : Tampilan Inline-Block CSS
Semua Tutorial CSS : Tutorial CSS