Float dan Clear

Dua Jendela November 15, 2021

7. Property CSS

a) Box Model

merupakan sebuah konsep dimana setiap elemen halaman website kita anggap seabgai sebuah kotak (box). Box inilah yang akan kemudian membangun struktur

desain dan layout dari website. Pembahasan yang akan kita pelajari meliputi :

1. Height dan Width

2. Margin dan Padding

3. Border dan Outline

4. Position

5. Overflow

6. Float dan Clear

7. Display dan Visibility

-----------------lanjutan

6. Float dan Clear

Property float = mengatur posisi box berada di kanan atau kiri teks, dan dapat di isi right atau left. Apabila kita isi dengan left, maka tampilan box akan di sisi kiri dan memberikan ruang di sebalah kanan yang dapat di isi dengan elemen lainnya.

Property float yang kita gunakan kadang mengacaukan tampilan, untuk itu terdapat fungsi dari property clear. Nilai dari property clear ini berupa :

· none

· left

· right

· both (right & left) serta

· inherit (mengikuti elemen induk)

Perhatikan contoh script dibawah ini dengan nama file float.html

<html>
<head>
<title>Belajar CSS Float</title>
<style type="text/css">
   .kiri{
        width: 150px;
        float: left;
        margin-right: 16px;
   }
   .kanan{
        width: 150px;
        float: right;
        margin-left: 16px;
   }
</style>
</head>
<body>
   <p><img src="../gambar/gambarku.jpg" class="kiri">Bunga adalah lambang dari kecantikan yang abadi. Jadilah engkau bunga yang akan terus tumbuh dan membuat kumbang terus bertahan hidup. Bunga adalah hiasan dan lambang kesempurnaan dari indahnya dunia. Bunga adalah lambang dari kecantikan yang abadi. Jadilah engkau bunga yang akan terus tumbuh dan membuat kumbang terus bertahan hidup. Bunga adalah hiasan dan lambang kesempurnaan dari indahnya dunia.</p>

   <p><img src="../gambar/gambarku.jpg" class="kanan">Bunga adalah lambang dari kecantikan yang abadi. Jadilah engkau bunga yang akan terus tumbuh dan membuat kumbang terus bertahan hidup. Bunga adalah hiasan dan lambang kesempurnaan dari indahnya dunia. Bunga adalah lambang dari kecantikan yang abadi. Jadilah engkau bunga yang akan terus tumbuh dan membuat kumbang terus bertahan hidup. Bunga adalah hiasan dan lambang kesempurnaan dari indahnya dunia.</p>
</body>
</html>