Floating elemen adalah menempatkan elemen secara terapung pada halaman dengan mengacu pada sebuah titik tambatan berada dikiri atau dikanan. Untuk membuat floating elemen kita menggunakan propert CSS float. Penggunaan CSS Float biasanya dipakai untuk menampilkan image, namun kadang dipakai juga oleh elemen lain terutama saat membuat layout.
Dengan CSS float, sebuah elemen bisa dipaksa untuk berada dikiri atau berada di kanan. Elemen hanya floating secara horizontal ke kiri atau ke kanan, tidak bisa ke atas atau ke bawah. Elemen yang dikenakan CSS float akan bergerak ke kiri atau kekanan pada suatu area tertentu pada elemen contain.
Elemen sebelum floating elemen tidak terkena efek CSS, namun elemen sesudahnya akan ditampilkan mengikuti alur dari floating elemen. Sebagai contoh jika sebuah image kita float ke kanan maka teks sesudahnya akan mengikutinya disebelah kiri.
Contoh penggunaan CSS float :
img {
float: right;
}
Kita bisa belajar CSS float disini >>
Merangkai Floating Elemen
Kita bisa menyusun elemen secara rapi dengan memanfaatkan CSS floating. Caranya adalah dengan menetapkan properti width dan height pada tiap elemen yang akan disusun tersebut. Kemudian untuk membuat jarak antar elemen kita gunakan properti margin.
Contoh penggunaan CSS float untuk merangkai elemen:
.preview {
float: left;
width: 100px;
height: 80px;
margin: 4px;
}
Kita bisa belajar CSS float untuk merangkai disini >>
Menghilangkan efek floating
Untuk menghilangkan efek floating pada elemen sesudah floating elemen kita menggunakan properti CSS clear, seperti contoh berikut ini :
.text_note {
clear: both;
}
Kita bisa belajar menghilangkan efek CSS float disini >>
Lihat indeks artikel Tutorial CSS Dasar >>
Referensi :
