Float CSS

Floating berarti menempatkan element di salah satu sisi dan menempatkan element lainnya disebelahnya.

float image

Kita bisa menempatkan text disekitar image dengan menggunakan attribute float. Ada dua pilihan untuk attribute float yaitu menempatkan text disebelah kiri atau disebelah kanan. Lihat contoh dibawah.

Code CSS float:

img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 4px;
}

Code HTML float:

<body>
<img src="http://jujucode.files.wordpress.com/2014/07/pizza-167366_150.jpg" class="floatLeft">
<p>Image yang ada dalam paragraph ini...</p>

<img src="http://jujucode.files.wordpress.com/2014/07/cheese-164872_150.jpg" class="floatRight">
<p>Paragraph yang kedua ini...</p>
</body>

Hasil code float:

Image yang ada dalam paragraph ini “float” ke sebelah kiri dan text ada disampingnya dan dibawahnya. Perhatikan bahwa ada sedikit jarak antara text dan image. Perhatikan pula perpaduan antara keduanya yaitu antara text dan image. Image yang ada dalam paragraph ini “float” ke sebelah kiri dan text ada disampingnya dan dibawahnya. Perhatikan bahwa ada sedikit jarak antara text dan image. Perhatikan pula perpaduan antara keduanya yaitu antara text dan image. Image yang ada dalam paragraph ini “float” ke sebelah kiri dan text ada disampingnya dan dibawahnya. Perhatikan bahwa ada sedikit jarak antara text dan image. Perhatikan pula perpaduan antara keduanya yaitu antara text dan image.

Paragraph yang kedua ini memiliki image yang “float” kesebelah kanan. Bisa kita perhatikan bahwa ada margin antara image dan text sehingga keduanya tidak terlalu dekat. Paragraph yang kedua ini memiliki image yang “float” kesebelah kanan. Bisa kita perhatikan bahwa ada margin antara image dan text sehingga keduanya tidak terlalu dekat. Paragraph yang kedua ini memiliki image yang “float” kesebelah kanan. Bisa kita perhatikan bahwa ada margin antara image dan text sehingga keduanya tidak terlalu dekat. Paragraph yang kedua ini memiliki image yang “float” kesebelah kanan. Bisa kita perhatikan bahwa ada margin antara image dan text sehingga keduanya tidak terlalu dekat. Paragraph yang kedua ini memiliki image yang “float” kesebelah kanan. Bisa kita perhatikan bahwa ada margin antara image dan text sehingga keduanya tidak terlalu dekat.

float clear

Jika kamu menggunakan code float biasa untuk dua atau tiga image secara bersamaan maka dua atau tiga image tersebut akan ditampilkan berderetan. Jika kamu ingin menampilkan image yang disusun secara vertical yaitu gambar yang satu ditaruh dibawah gambar yang lainnya maka kamu bisa menggunakan code clear seperti dibawah ini.

Code clear berfungsi untuk menghilangkan efek dari float pada sebuah element baik disebelah kiri, kanan, maupun dikedua sisi dari element yang dikehendaki.

value description
left menghilangkan efek float disebelah kiri element
right menghilangkan efek float disebelah kanan element
both menghilangkan efek float dikedua sisi element

Code CSS float multiple image dengan tambahan code clear:

img.floatRightClear {
float: right;
clear: right;
margin: 4px;
}

Code HTML float multiple image dengan tambahan code clear:

<body>
<img src="http://jujucode.files.wordpress.com/2014/07/pizza-386717_150.jpg" class="floatRightClear">
<img src="http://jujucode.files.wordpress.com/2014/07/spinach-72123_1501.jpg" class="floatRightClear">
<p>Kedua image disebelah tampil secara vertical...</p>
<p>Jika code attribute CSS clear kita beri value...</p>
<p>Banyaknya paragraph tidak akan...</p>
</body>

Hasil code float multiple image dengan tambahan code clear:

Kedua image disebelah tampil secara vertical yaitu yang satu tampil dibawah yang lainnya karena telah diberi attribute CSS clear dengan value “right”. Code tersebut akan membuat semua image yang float kesebelah kanan akan berpindah kesebelah bawah.

Jika code attribute CSS clear kita beri value “left” maka tidak akan ada efek yang terjadi pada image karena image akan tampil secara default yaitu image akan tampil secara berderet horizontal.

Banyaknya paragraph tidak akan berpengaruh terhadap tampilan image.

Lihat contoh lainnya untuk code float clear ini. Pada contoh kedua ini kita menggunakan dua buah text yang masing-masing kita beri code float. Kemudian salah satunya kita berikan code clear. Lihat apa yang terjadi.

Code CSS float clear untuk text:

i { float: left;}

b {
float: left;
clear: left;
}

Hasil code CSS float clear untuk text:

Text italic ini sudah diberi code “float:left”Text bold ini setelah diberi code “float:left” seharusnya berada disebelah kanannya text italic diatas. Tetapi kita telah beri tambahan code “clear:left” sehingga text bold ini tampil pada baris baru.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>