Fungsi Float pada CSS

Fungsi Float pada CSS - Layouting pada halaman website sangatlah penting karena merupakan bagian seni dari website itu sendiri. Untuk membuat layouting tentu perlu styling CSS yang akan melakukan semuanya, bagaimana posisi suatu elemen ditempatkan. Ada satu properti yang akan saya bahas kali ini untuk melakukan layouting yakni float.

Float merupakan properti CSS yang bisa kita manfaatkan untuk memposisikan suatu elemen, nilai dari float sendiri adalah left, right, none, inherit.

saya akan berikan contoh bagaimana penggunaan float pada suatu elemen yang akan diberikan posisi tertentu misalnya disebelah kiri atau kanan, pada kasus ini elemen yang akan diposisikan yakni gambar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fungsi Float pada CSS</title>
    <style>
        .container {
            width: 800px;
            margin: auto;
        }
        img {
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Fungsi Float pada CSS</h2>
        <img src="img-1.jpg" width="400" alt="img-1">
        <p>DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis. Sampai saat ini DUMET School sudah memiliki lulusan lebih dari 8000 orang dari berbagai status dan profesi mulai dari pelajar sekolah, mahasiswa, guru, dosen, staff profesional, freelancer, dll. Mereka tidak hanya yang tinggal di Jakarta saja namun banyak juga yang datang dari berbagai daerah di Indonesia.</p>
    </div>
</body>
</html>

Pada tag img telah diberikan properti float:left yang berarti elemen gambar telah diposisikan disebelah kiri, kemudian teks akan mengikuti elemen gambarnya.

Fungsi Float pada CSS

Dengan memanfaatkan properti float kita bisa dengan mudah memposisikan suatu elemen berada disebelah kiri atau kanan yang paling umum digunakan.

Bagaiamana, sudah faham ya dengan penjelasan dan penggunaan properti float CSS ? Cukup sekian pembahasan Fungsi Float pada CSS, semoga bermanfaat

20 Februari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat