Jadwal Kursus

Tutorial Tingkat Lanjut CSS

• Buku Ekstra CSS
• Ringkasan CSS
• Gramatika Dasar CSS
• Gramatika Mahir CSS
• Pemilihan Pencabut Derivatif CSS
• Pemilihan Pencabut id CSS
• Pemilihan Pencabut kelas CSS
• Pembuatan CSS
• Latar Belakang CSS
• Teks CSS
• Font CSS
• Daftar CSS

Model Kotak CSS

• Ringkasan Model Kotak Dalam CSS
• Margin Dalam CSS
• Batas CSS
• Margin Luar CSS
• Penggabungan Margin Luar CSS

Pemosisian CSS

• Ringkasan Lokasi CSS
• Lokasi Relatif CSS
• Lokasi Absolut CSS
• Floating CSS

Pemilih CSS

• Pemilihan Elemen CSS
• Pemecahan Pemilihan Pencabut CSS
• Pemilihan Pencabut kelas CSS Dengan Perincian
• Pemilihan Pencabut id CSS Dengan Perincian
• Pemilihan Pencabut Atribut CSS Dengan Perincian
• Pemilihan Pencabut Anak-Anak
• Pemilihan Pencabut Anak Elemen
• Pemilihan Pencabut Saudara Kiri

Kursus Pilihan

Rekomendasi Kursus:

• Kotak Sakti CodeW3C.com

Kotak floating dapat bergerak ke arah kiri atau kanan, hingga luar pinggirnya menabrak pinggir kotak yang mengandung atau pinggir kotak floating lainnya.

Karena kotak floating tidak berada di alur normal dokumen, jadi kotak blok di alur normal dokumen bertindak seperti jika kotak floating tidak ada.

Floating CSS

Lihat gambar di bawah, saat kotak 1 bergerak ke arah kanan, ia keluar dari alur dokumen dan bergerak ke arah kanan, hingga sisi kanan nya mendekati sisi kanan kotak yang mengandung:

Lihat gambar di bawah, saat kotak 1 bergerak ke arah kiri, ia keluar dari alur dokumen dan bergerak ke arah kiri, hingga sisi kiri nya mendekati sisi kiri kotak yang mengandung. Karena ia tidak lagi berada di alur dokumen, ia tidak mengambil ruang, sebenarnya menutupi kotak 2, sehingga kotak 2 menghilang dari penglihatan.

Jika semua tiga kotak bergerak ke arah kiri, kotak 1 bergerak ke arah kiri hingga mendekati kotak yang mengandung, dan dua kotak lainnya bergerak ke arah kiri hingga mendekati kotak floating sebelumnya.

Sebagaimana terlihat di gambar di bawah, jika kotak yang mengandung terlalu sempit untuk menampung tiga elemen floating yang berbaris horizontal, maka blok floating lainnya akan bergerak ke bawah hingga terdapat ruang yang cukup. Jika tinggi elemen floating berbeda, mereka mungkin akan 'terhalang' saat bergerak ke bawah oleh elemen floating lainnya:

Atribut floating CSS

Dalam CSS, kita melaksanakan floating elemen melalui properti float.

Untuk mendapatkan pengetahuan lebih lanjut tentang properti float, kunjungi buku referensi:Atribut floating CSS。

Kotak baris dan pembersihan

Kotak baris di sebelah kotak floating disingkatkan, sehingga memberikan ruang bagi kotak floating, dan kotak baris mengelilingi kotak floating.

Oleh itu, membuat kotak floating dapat membuat teks mengelilingi gambar:

Untuk menghentikan kotak baris mengelilingi kotak floating, perlu mengaplikasikan kotak itu Atribut clear. nilai atribut clear dapat berupa left, right, both atau none, yang menunjukkan sisi mana dari kotak yang tidak harus mendekati kotak mengambang.

Untuk mencapai efek ini, di dalam elemen yang dipersihkan,Margin atasTambahkan ruang yang cukup di atas untuk membuat边缘 elemen menurun vertikal ke bawah dari boks mengambang:

Ini adalah alat yang berguna, yang membuat elemen di sekeliling memberi ruang bagi elemen mengambang.

Berikut adalah contoh kode yang anda mungkin tulis jika ingin membelokkan gambar ke kiri blok teks dan ingin gambar dan teks disertai dalam elemen lain yang memiliki warna latar dan garis pinggir:

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Dalam situasi ini, muncul masalah. Karena elemen mengambang keluar dari alur dokumen, div yang melingkungi gambar dan teks tidak mengambil ruang.

Bagaimana untuk membuat elemen yang melingkungi mengelilingi elemen mengambang secara visual? Perlu menerapkan clear di tempat yang mana-mana dalam elemen ini:

Sayangnya, muncul masalah baru, karena tidak ada elemen yang dapat diterapkan pemersihan, jadi kami hanya dapat menambah elemen kosong dan memersihkannya.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

Dengan cara ini, kami dapat mencapai efek yang diinginkan, tetapi perlu menambah kode yang berlebihan. Kadang-kadang ada elemen yang dapat diterapkan clear, tetapi kadang-kadang harus menambah tanda yang tidak berarti untuk melakukan layout.

Walau bagaimanapun, kami masih memiliki cara lain, yaitu mengambang div wadah:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Dengan cara ini, kami mendapatkan efek yang diinginkan. Sayangnya, elemen berikutnya akan terpengaruh oleh elemen mengambang ini. Untuk memecahkan masalah ini, beberapa orang memilih untuk mengambang semua benda di dalam layout, kemudian menggunakan elemen yang berarti (biasanya kaki laman situs) untuk memersihkan pengambangan. Ini membantu mengurangi atau menghapus tanda yang tidak perlu.

Faktanya, semua halaman di laman CodeW3C.com menggunakan teknologi ini. Jika anda buka file CSS yang kami gunakan, anda akan melihat kami melakukan pemersihan div kaki laman, sementara tiga div di atas kaki laman mengambang ke kiri.

Atribut clear CSS

Kami baru-baru ini membincangkan secara mendalam prinsip kerja pemersihan CSS dan cara aplikasi atribut clear. Jika anda mahu belajar lebih banyak tentang atribut clear, sila lawati panduan rujukan:Atribut clear CSS。

Alat Tangkap

Panduan Referensi CSS

Contoh CSS

Ujian CSS

Panduan CSS

Tautan Pemilik