Rancangan Layout CSS - Apung dan Bersih

Rancangan Layout CSS - Apung dan Bersih

CSS float Atribut menentukan bagaimana elemen mengambang.

CSS clear Atribut menentukan elemen mana yang dapat mengambang di samping elemen yang dihapus dan di sisi mana.

Atribut float

float Atribut digunakan untuk menempatkan dan memformat konten, seperti memindahkan gambar ke kiri ke teks di kontainer.

float Atribut dapat diset ke salah satu nilai berikut:

  • left - Elemen mengambang ke sisi kiri kontainer
  • right - Elemen mengambang di sisi kanan kontainer
  • none - Elemen tidak mengambang (akan muncul di tempat gambar muncul di teks). Nilai standar.
  • inherit - Elemen mewarisi nilai float dari родителя

Penggunaan paling sederhana adalah,float Atribut dapat mencapai efek teks diseluruh gambar (di koran).

Contoh - float: right;

Contoh di bawah ini menentukan gambar harus muncul di tempat gambar berpindah ke kanan:

Pineapple

Tutorial Teknologi Web Terkemuka - Seluruhnya Gratis. Di CodeW3C.com, Anda dapat menemukan semua tutorial perencanaan situs yang Anda butuhkan. Dari HTML dasar hingga CSS, hingga XML, SQL, JS, PHP lanjutan.

Panduan referensiku meliputi segala aspek teknologi situs. Termasuk standar teknologi W3C: HTML, CSS, XML. serta teknologi lainnya seperti JavaScript, PHP, SQL.

Di CodeW3C.com, kami menyediakan ribuan contoh. Dengan menggunakan editor online kami, Anda dapat mengedit contoh ini dan menguji kode.

Contoh

img {
  float: right;
}

Coba Sendiri

Contoh - float: left;

Contoh di bawah ini menentukan gambar harus muncul di tempat gambar di teksKe kiriPenduaan:

Pineapple

Tutorial Teknologi Web Terkemuka - Seluruhnya Gratis. Di CodeW3C.com, Anda dapat menemukan semua tutorial perencanaan situs yang Anda butuhkan. Dari HTML dasar hingga CSS, hingga XML, SQL, JS, PHP lanjutan.

Panduan referensiku meliputi segala aspek teknologi situs. Termasuk standar teknologi W3C: HTML, CSS, XML. serta teknologi lainnya seperti JavaScript, PHP, SQL.

Di CodeW3C.com, kami menyediakan ribuan contoh. Dengan menggunakan editor online kami, Anda dapat mengedit contoh ini dan menguji kode.

Contoh

img {
  float: left;
}

Coba Sendiri

Contoh - Tidak ada float

Dalam contoh di bawah ini, gambar akan muncul di tempat gambar muncul di teks (float: none;):

Pineapple Tutorial Teknologi Web Terkemuka - Seluruhnya Gratis. Di CodeW3C.com, Anda dapat menemukan semua tutorial perencanaan situs yang Anda butuhkan. Dari HTML dasar hingga CSS, hingga XML, SQL, JS, PHP lanjutan. Panduan referensiku meliputi segala aspek teknologi situs. Termasuk standar teknologi W3C: HTML, CSS, XML. serta teknologi lainnya seperti JavaScript, PHP, SQL. Di CodeW3C.com, kami menyediakan ribuan contoh. Dengan menggunakan editor online kami, Anda dapat mengedit contoh ini dan menguji kode.

Contoh

img {
  float: none;
}

Coba Sendiri

Bacaan Tambahan

Buku Lengkap:Gelombang CSS