Tata Letak CSS - mengambang dan jelas
Properti CSS floatmenentukan bagaimana sebuah elemen harus mengapung.
Properti CSS clearmenentukan elemen apa yang bisa mengapung di samping elemen yang dibersihkan dan di sisi mana.
Properti mengapung
Properti floatini digunakan untuk memposisikan dan memformat konten, misalnya membiarkan gambar melayang ke kiri ke teks dalam wadah.
Properti floatdapat memiliki salah satu dari nilai berikut:
-
left- Elemen mengapung di sebelah kiri wadahnya -
right- Elemen mengapung di sebelah kanan wadahnya -
none- Elemen tidak mengapung (akan ditampilkan tepat di tempat kemunculannya dalam teks). Ini adalah default -
inherit- Elemen mewarisi nilai float dari induknya
Dalam penggunaannya yang paling sederhana, floatproperti dapat digunakan untuk membungkus teks di sekitar gambar.
Contoh - float: kanan;
Contoh berikut menentukan bahwa gambar harus melayang ke kanan dalam teks:
Rasa sakit itu sendiri adalah cinta, sistem penyimpanan utama. Phasellus imperdiet, tidak dan terkadang dikatakan, tetapi keinginan untuk membenci Maecenas adalah penggemar, pendendam dan tidak memasak, penulis kehidupan massal.
Contoh
img {
float: right;
}
Contoh - float: kiri;
Contoh berikut menentukan bahwa gambar harus melayang ke kiri dalam teks:
Rasa sakit itu sendiri adalah cinta, sistem penyimpanan utama. Phasellus imperdiet, tidak dan terkadang dikatakan, tetapi keinginan untuk membenci Maecenas adalah penggemar, pendendam dan tidak memasak, penulis kehidupan massal.
Contoh
img {
float: left;
}
Contoh - Tidak ada pelampung
Dalam contoh berikut, gambar akan ditampilkan tepat di tempat kemunculannya dalam teks (float: none;):
Rasa sakit itu sendiri adalah cinta, sistem penyimpanan utama. Phasellus imperdiet, tidak dan terkadang dikatakan, tetapi keinginan untuk membenci Maecenas adalah penggemar, pendendam dan tidak memasak, penulis kehidupan massal.
Contoh
img {
float: none;
}
Contoh - Mengapung Di Sebelah Satu Sama Lain
Biasanya elemen div akan ditampilkan di atas satu sama lain. Namun, jika kita menggunakan float: leftkita dapat membiarkan elemen mengapung di samping satu sama lain:
Contoh
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}