Belajar CSS : CSS Layout (Position, Overflow, dan Float)

Hallo teman semua, pada kesempatan kali ini saya akan memposting materi tentang CSS Layout position, overflow dan float. Berikut materinya ..

CSS LAYOUT - PROPERTI POSISI
Properti position menetapkan jenis metode penentuan posisi yang digunakan untuk elemen. Ada empat nilai posisi, diantaranya :

• static, merupakan elemen nilai titik tetap (default).

        Contoh :
        div.static {
        position: static;
        border: 3px solid #ff0000;
        }

• relative, diposisikan relatif terhadap posisi normal. Mengatur atas, kanan, bawah dan kiri dari elemen yang relatif strategis aka menyebabkan disesuaikan jauh dari posisi normal. 

        Contoh :
        div.relative {
        position: relative;
        left: 40px;
        border: 3px solid #0000ff;
        }

• fixed, selalu tetap ditempat yang sama bahkan jika halaman tersebut discroll.

        Contoh :
        div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 200px;
        border: 4px solid #0000ff;
       }

• absolute, Elemen akan dihilangkan atau dicabut dari alur dokumen, dan elemen lainnya akan bekerja sebagaimana mestinya (tidak terganggu dengan elemen yang diberikan properti absolute). Apabila element yang mempunyai properti absolute tersebut ada didalam sebuah element lagi (parent), maka element tersebut akan diabaikan, seakan-akan elemen tersebut tidak ada di dalam element parent tersebut.

        Contoh :
        div.relative {
        position: relative;
        width: 400px;
        height: 200px;
        border: 3px solid #0000ff;
        }

       div.absolute {
       position: absolute;
       top: 80px;
       right: 0;
       width: 200px;
       height: 100px;
       border: 3px solid #ff0000;
       } 
CSS LAYOUT - OVERFLOW
Properti ini menentukan apakah untuk klip konten atau menambahkan scrollbar ketika isi dari suatu unsur terlalu besar untuk memuat are tertentu.
Properti overflow :

• visible, overflow tidak terpotong. Membuat luar kotak elemen.

        Contoh :
        div {
        background-color: #ccc;
        width: 200px;
        height: 50px;
        border: 1px dotted black;
       overflow: visible;
       }

• hidden, terpotong dan sisanya dari konten akan terlihat.

        Contoh :
        div {
        background-color: #ccc;
        width: 200px;
        height: 50px;
        border: 1px dotted black;
        overflow: hidden;
         }

• scroll, terpotong tapi scrollbar ditambahkan untuk melihat sisa isi.

        Contoh :
        div {
        background-color: #ccc;
        width: 200px;
        height: 50px;
        border: 1px dotted black;
        overflow: scroll;
       }

• auto, apabila overflow terpotong, scrollbar harus ditambahkan untuk melihat sisa isi.

        Contoh :
        div {
        background-color: #ccc;
        width: 200px;
        height: 50px;
        border: 2px dotted black;
        overflow: auto;
        }
*Properti overflow hanya bekerja untuk elemen blok dengan ketinggian  tertentu.

CSS LAYOUT - FLOAT AND CLEAR
Properti float menentukan apakah  iya atau tidak unsur harus mengapung. Berikut merupakan contoh menetapkan gambar mengapung.

img {
    float: right;
    margin: 0 0 10px 10px;
} 

Properti clear digunakan untuk mengontrol float.
Contoh

div{
    clear: left;
}

Agar tidak terjadi meluap keluar wadah karena unsur lebih tinggi yang berisi itu dan melayang kita dapat menambah overflow: auto;
Contoh :
div {
    border: 3px solid #ff0000;
}

.img1 {
    float: right;
}

.clearfix {
    overflow: auto;
}

.img2 {
    float: right;
}

Akan bekerja dengan baik apabila dapat mengontrol margin dan padding. Berikut kode yang sebagian besar digunakan halaman web
div {
    border: 3px solid #ff0000;
}

.img1 {
    float: right;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.img2 {
    float: right;

Referensi :
http://www.w3schools.com/css/css_positioning.asp
http://www.w3schools.com/css/css_overflow.asp 
http://www.w3schools.com/css/css_float.asp 

Sekian dan terimakasih