Materi 16 : Property Float dan Clear pada CSS

Property Float dan Clear pada CSS – Pada pembahasan materi kali ini, kita akan bahas satu property dulu yaitu property float yang ada pada css ini. Karena property clear sebenarnya hanya tambahan saja, setiap kali ada materi property float pasti materi property clear akan ada di sana. Tapi kali ini kita coba bahas satu dulu yaitu float.

Property Float dan Clear pada CSS

Property float digunakan untuk mengatur posisi dan tata letak elemen pada html. Kalau tidak salah sudah kami singgung sedikit materi ini di materi – materi sebelumya. Jadi, property ini berfungsi untuk mengatur posisi elemen, baik itu kontennya berupa teks, gambar ataupun yang lainnya. Contohnya kita ingin gambar pada paragraf yang kita buat berada di sebelah kanan artikel, maka property yang digunakan adalah property float.

Nah, property float ini memiliki 4 nilai yang bisa digunakan sesuai dengan kebutuhan kita. Apa saja 4 nilai dari property float ini, simak ulasan lengkapnya berikut ini;

float: left

Efek dari nilai left adalah sesuai dari bahasanya yaitu kiri, efeknya adalah elemen akan berada di sebelah kiri dari elemen yang memiliki nilai default. Nilai default dari suatu elemen mungkin berada di tengah atau di bagian kiri. Tentunya elemen tersebut tidak akan berpindah posisi jika kita tidak memberikan instruksi apakah ia berada di kiri, tengah atau di kanan.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan CSS</title>
 <style>
 p {
  text-align: justify;
 }
 img {
  width: 200px;
  height:150px;
  margin-right:15px;
  /*di bawah ini property float dan nilainya*/
  float: left; 
 }
 </style>
</head>
<body>
 <p><img src="kucing.jpg" alt="kucing">Di Blog Web Design Purbalingga kita bisa belajar tentang bagaimana aturan dasar saat mendesain sebuah web. Tidak cuma itu, kita juga bisa belajar sedikit demi sedikit tentang web programming. Blog ini sangat asik untuk belajar karena selain ada penjelasan tentang materi itu sendiri, juga ada contoh penggunaan kode kodenya.&nbsp;Di Blog Web Design Purbalingga kita bisa belajar tentang bagaimana aturan dasar saat mendesain sebuah web. Tidak cuma itu, kita juga bisa belajar sedikit demi sedikit tentang web programming. Blog ini sangat asik untuk belajar karena selain ada penjelasan tentang materi itu sendiri, juga ada contoh penggunaan kode kodenya.</p>
</body>
</html>

Hasilnya

float: right

Sudah tau ya, nilai right adalah kebalikan dari nilai left. Silahkan ganti nilai property float dengan nilai right dan tampilkan hasilnya di browser kalian.

img {
  float: right;
}

float: none

Efek dari nilai ini adalah tidak ada efek apapun karena memang perintahnya tidak ada (none), jadi efeknya sama seperti nilai default. Ganti nilai right menjadi none dan jangan lupa tampilkan hasilnya di browser

img {
  float: none;
}

float: inherit

Efeknya hampir sama dengan nilai none, belum ada penjelasan spesifik tentang nilai ini (waiting for...)

img {
  float: inherit;
}

Sekian materi tentang mengenal property float dan clear pada css kali ini. Semoga bermanfaat dan sampai jumpa di materi berikutnya. Bagi teman – teman yang masih bingung, silahkan kirimkan pertanyaan di kolom komentar di bawah ini. Bantu dukung kami untuk selalu membagikan ilmu sederhana ini kepada teman – teman yang punya minat mendalami web desain dengan cara bagikan artikel ini sebanyak – banyaknya di media sosial kalian. Terima kasih

Web Design Purbalingga