CSS Float

HTML
Web

December 20, 2020

Halo sobat? apa kabar? kali ini kita akan membahas tentang CSS Float dalam Web Development. Software yang akan kita gunakan kali ini adalah visual studio code di visual studio code. Pastikan sobat sudah mengikuti blog sebelumnya ya tentang live server.

Apa sih itu Float?

Float ialah properti yang dapat membuat elemen html berada pada sisi yang kita tentukan.

Nah kalau property float ini digunakan pada elemen inline, maka elemen lain akan mengelilinginya. Terdapat dua varian yang bisa kalian pilih pada float ini, seperti; left dan right

img {
	float: right;
}

bagaimana untuk implementasinya? mari ikuti kode berikut ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container {
            border: 2px solid black;
            overflow: auto;
            }
        img{
            float: right;
        }
    </style>
</head>
<body>

    <div class="container">

        <img src="https://www.udacoding.com/wp-content/uploads/2020/12/Apa-itu-Float-dan-Flexbox.png" width="400px" alt="">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea quibusdam, officiis vero tempore cupiditate necessitatibus debitis dolores. Eius in, et eligendi a molestias maxime libero ipsam consequatur dicta eaque sed aliquid dolorum quia eos doloremque ratione, maiores rerum qui repudiandae.</p>
        <!-- <div class="clear"></div> -->
    </div>
    
</body>
</html>

Dan berikut adalah outputnya:

Bagaimana? cukup mudah bukan penerapan float. Sobat uda bisa mulai eksplorasi lagi dalam penggunaan float ini. Dan jika lebih penasaran lagi terkait development. Sobat uda bisa buka ig udacoding disini. Nantikan blog lainnya sobat udacoding, yang pastinya tentang web development. Terimakasih