Kursus Membuat Web

iklan

Float CSS

Klematis
Klematis
Klematis
Klematis

Apa itu float CSS?

Dengan CSS float, sebuah elemen bisa didorong ke kiri atau kanan.

Float sering digunakan dengan image, tetapi ini juga berguna bila bekerja dengan layout.

Bagaimana Elemen Mengambang (Float)

Elemen mengambang horizontal, ini maksudnya bahwa elemen hanya bisa mengambang kiri atau kanan, tidak atas bawah.

Elemen setelah elemen mengambang akan mengalir disekitarnya.

Elemen sebelum elemen mengambang tidak akan dipengaruhi.

Jika image dialirkan ke kanan, teks mengalir disekitarnya, ke kiri:

Contoh
img {
    float: right;
}
Lihat ...

Elemen Lain Akan Mengikuti Elemen Mengambang

Jika Anda menempatkan beberapa elemen mengambang, mereka akan mengambang di samping satu sama lain jika ada ruang.

Di sini kita akan membuat sebuah image galery menggunakan properti float:

Contoh
.thumbnail {
    float: left;
    width: 110px;
    height: 90px;
    margin: 5px;
}
Lihat ...

Mematikan Float - Menggunakan Clear

Elemen setelah elemen mengambang akan mengalir disekitarnya. Untuk menghindari ini, gunakan property clear.

Property clear menetapkan yang mana dari elemen lain yang tidak diijinkan mengambang.

menambah baris baru kedalam image gallery, menggunakan property clear:

Contoh
.thumbnail {
    float: left;
    width: 110px;
    height: 90px;
    margin: 5px;
}

.text_line {
    clear: both;
    margin-bottom: 2px;
}
Lihat ...

Contoh - Contoh Lain

img {
    float: right;
    border: 1px dotted black;
    margin: 0px 0px 15px 20px;
}

Sebuah image dengan border dan margin mengambang kekanan dalam paragraf

Membuat image mengambang kekanan dalam paragraf. tambahkan border dan margin untuk image.

div {
	float: right;
	width: 380px;
	margin: 0 0 15px 20px;
	padding: 15px;
	border: 1px solid black;
	text-align: center;
}

Sebuah image dengan judul mengambang kekanan

Membuat image dengan judul mengambang kekanan.

span {
    float: left;
    width: 0.7em;
    font-size: 400%;
    font-family: algerian, courier;
    line-height: 80%;
}

Membuat huruf pertama dari paragraf mengambang ke kiri

Membuat huruf pertama dari paragraf mengambang ke kiri

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: purple;
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}

a:hover {
    background-color: fuchsia;
}

li {
    display: inline;
}

Membuat menu horizontal

Gunakan float pada list dari hyperlink untuk membuat menu horizontal.

div.container {
    width: 100%;
    margin: 0px;
    border: 1px solid gray;
    line-height: 150%;
}

div.header, div.footer {
    padding: 0.5em;
    color: white;
    background-color: gray;
    clear: left;
}

h1.header {
    padding: 0;
    margin: 0;
}

div.left {
    float: left;
    width: 160px;
    margin: 0;
    padding: 1em;
}

div.content {
    margin-left: 190px;
    border-left: 1px solid gray;
    padding: 1em;
}

Membuat homepage tanpa tabel

Pakai float untuk membuat homepage dengan header, footer, left content dan main content.

Semua Property Float CSS

Property Keterangan Nilai
clear Menetapkan sisi mana dari elemen yang tidak diijinkan mengambang left
right
both
none
inherit
float Menetapkan apakah elemen akan mengambang atau tidak left
right
none
inherit

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015