Lompat ke konten Lompat ke sidebar Lompat ke footer

Belajar CSS - Mengenal Float Pada CSS

Di dalam pembuatan website, kita banyak menggunakan Properti pada CSS dan salah satunya adalah Float.

Oke selamat datang kembali teman teman, Pada kesempatan ini kita akan membahas tentang Float, sekilas pembahasan ada diatas halaman ini, dan kurang lebih seperti itu pembahasan nya.

Penjelasan Float

Float merupakan sebuah properti yang banyak digunakan di dalam pembuatan sebuah website,  ada 4 value yang biasa kita gunakan di dalam properti ini, yaitu Left, Right, Initial dan Inherit..

Penjelasan Sekilas

Jika diartikan Float memiliki arti "mengapung", Maksud mengapung disini berarti elemen yang memilik float tersebut akan dipindahkan ke halaman kiri (left) ataupun kanan (right), seperti yang disebutkan di penjelasan diatas..
float: left; digunakan untuk mengatur bahwa elemen harus mengapung kesebelah kiri dari posisi block / elemen block yang menampung nya.
float: right; digunakan untuk mengatur bahwa elemen harus mengapung kesebelah kanan dari posisi block / elemen block yang menampung nya.
float: none; digunakan bahwa elemen tidak boleh mengapung (float).
float: inherit;  value / nilai dari float mengikuti elemen induk yang menampung sebelumnya.
Elemen yang menggunakan float, tidak bisa digunakan untuk elemen yang menggunakan position absolute. contoh seperti code dibawah, coba teman teman hapus property float ataupun property position. dan lihat apa efeknya.


Float Pada CSS
Float Pada CSS
Oke teman teman, dibawah ini kita akan mencoba Float yang sebenarnya!! hehe


<html>
    <head>
        <meta charset="UTF-8" />
        <title>Box Model</title>
        <style>
            h1 {
                margin: 10px;
                text-align: center;
            }
            img {
                width: 240px;
                height: 150px;
                margin: 20px;
                float: left;
            }
            p {
                font-size: 20px;
            }
            #header {
                width: 500px;
                height: 100px;
                background: #00ffab;
                float: left;
                border: solid 10px;
                border-color: #550047;
            }
            #navkiri {
                position: absolute;
                width: 500px;
                height: 400px;
                background: #00ffab;
                float: left;
                border: solid 10px;
                border-color: #550047;
                margin-top: 10%;
            }
            #isi {
                width: 750px;
                height: 540px;
                background: #00ffab;
                float: right;
                border: solid 10px;
                border-color: #550047;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>
                Latihan Belajar CSS Float
            </h1>
        </div>
        <div id="header">
            <h1>Header</h1>
        </div>
        <div id="navkiri">
            <h1>Navigasi kiri</h1>
        </div>
        <div id="isi">
            <h1>Halaman Isi</h1>
            <img src="CSS.png" alt="css" />
            <p>
                Hai Semua, Halo Teman Teman , Bagaimana Keadaan Teman Teman
                Semua? Semoga Baik Baik saja yah. Oke pada Kesempatan ini, kita
                akan memasuki Materi Selanjutnya dari HTML, yaitu CSS. Ingin
                mengetahui apa itu CSS lebih lengkap? Mari kita jelajahi di Blog
                Ini! Nah pada Bagian Ini ada beberapa Tips yang ingin saya
                bagikan untuk memudahkan teman teman dalam belajar CSS Yang
                pertama ini, teman teman bisa memulai dengan sering berlatih
                membuat sebuah halaman web dengan imajinasi kalian sendiri, dan
                saya yakin pasti teman teman lebih kreatif untuk mencari kode
                ini, kode itu, nah seperti itu Gunakan sebuah plugin atau tools
                tambahan pada code editor teman teman, nah kalau saya sih masih
                menggunakan Sublime Text, dan saya pakai Emmet untuk
                Mempermudahkan nya. Cara Mudah CSS dengan EMMET Teman Teman juga
                bisa menggunakan Cheat Sheets CSS, disini Cheat Sheets CSS Nah
                teman teman sekalian mungkin cukup itu dulu yang bisa saya
                sharing pada kesempatan kali ini, selanjutnya kita akan membahas
                Tentang Struktur Dasar CSS.
            </p>
        </div>
    </body>
</html>


Oke teman teman, jadi sesuai dengan code diatas itu kita menggunakan float left, dan right serta di tambah lebar pada gambar.. 
dan hasil dari HTML diatas adalah seperti ini.

Float di CSS
Hasil Float
Jadi teman teman bisa lihat, contoh pada gambar di Halaman Isi, nah itu kita menggunakan Sebuah Float Left pada gambar yang kita masukan, sehingga teks akan auto mengisi di halaman samping nya.

Teman teman juga bisa mencoba beberapa hal lain dengan Properti Float, bisa menggunakan beberapa Value seperti Left, Right, Initial dan Inherit.

Nah mungkin cukup seperti itu teman teman, terimakasih sudah berkunjung.
Salam Semangat!!

Posting Komentar untuk "Belajar CSS - Mengenal Float Pada CSS"