Cara Menggunakan Float di CSS

lebakcyber.net – Cara Menggunakan Float di CSS. Pada kesempatan kali ini kita akan mempelajari tentang bagaimana cara untuk menggunakan float pada CSS di halaman HTML yang sedang kita buat.

Float pada web desain adalah salah satu kebutuhan yang sering dibutuhkan. Float sendiri juga berfungsi untuk dapat mengatur tata letak pada element secara horizontal.

Ada empat buah value yang dapat digunakan pada property float, yaitu right, left, none dan juga inherit.

Contoh dari penggunaan Float yang paling sering digunakan adalah pada saat kita ingin membuat sebuah posisi gambar postingan website yang ada di bagian samping isi dari konten yang dibuat. Sekarang langsung saja kita coba mempraktekannya ya. Silahkan buat file style.css dan juga index.html lalu masukan perintah dibawah ini :

Float Left

style.css

h1{
    text-align: center;
}
 
.gambar{
    width: 300px;
    float: left;
    margin-right: 10px;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Float di CSS - Lebakcyber.net</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Belajar Float di CSS - lebakcyber.net</h1>
 
    <div class="kotak">
        <img class="gambar" src="lebakcyber.png" width = 50px height = 200px>
        <p>
            Belajar CSS bersama lebak cyber. Disini kita akan mempelajari bagaimana cara penggunaan dari float pada CSS. Semoga tutorial sederhana ini dapat bermanfaat bagi kalian yang sedang mempelajari CSS. Belajar CSS di lebakcyber, tutorial css di lebakcyber, materi css di lebakcyber			
        </p>
    </div>
</body>
</html>

Silahkan buka file index.html tersebut melalui browser, nanti tampilannya akan seperti gambar dibawah ini :

Pada contoh diatas kita menggunakan value float dengan nilai left pada element gambar yang dimasukan, sehingga membuat gambar yang ditampilkan terletak di samping isi konten dan akan menjorok mengikuti element dari gambar.

Float Right

Sekarang kita akan mencoba membuat float right, langsung saja buat sebuah file style.css dan juga index.html lalu masukan perintah dibawah ini :

style.css

h1{
    text-align: center;
}
 
.gambar{
    width: 300px;
    float: right;
    margin-right: 10px;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Float di CSS - Lebakcyber.net</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Belajar Float di CSS - lebakcyber.net</h1>
 
    <div class="kotak">
        <img class="gambar" src="lebakcyber.png" width = 50px height = 200px>
        <p>
            Belajar CSS bersama lebak cyber. Disini kita akan mempelajari bagaimana cara penggunaan dari float pada CSS. Semoga tutorial sederhana ini dapat bermanfaat bagi kalian yang sedang mempelajari CSS. Belajar CSS di lebakcyber, tutorial css di lebakcyber, materi css di lebakcyber			
        </p>
    </div>
</body>
</html>

Jalankan file index.html tersebut pada browser, nanti hasilnya seperti pada gambar dibawah ini :

Float Inherit

Sekarang kita akan mencoba membuat float inherit, silahkan buat file style.css dan juga index.html lalu masukan perintah dibawah ini :

style.css

h1{
    text-align: center;
}
 
.gambar{
    width: 300px;
    float: inherit;
    margin-right: 10px;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Float di CSS - Lebakcyber.net</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Belajar Float di CSS - lebakcyber.net</h1>
 
    <div class="kotak">
        <img class="gambar" src="lebakcyber.png" width = 50px height = 200px>
        <p>
            Belajar CSS bersama lebak cyber. Disini kita akan mempelajari bagaimana cara penggunaan dari float pada CSS. Semoga tutorial sederhana ini dapat bermanfaat bagi kalian yang sedang mempelajari CSS. Belajar CSS di lebakcyber, tutorial css di lebakcyber, materi css di lebakcyber			
        </p>
    </div>
</body>
</html>

Nanti hasilnya akan seperti pada gambar dibawah ini :

Oke jadi seperti itulah bagaimana cara melakukan pengaturan float menggunakan CSS pada halaman HTML yang sedang kita buat, semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa pada tutorial belajar CSS selanjutnya ya.

Lebak Cyber Tips dan Trik Komputer

Cara Menggunakan Float di CSS