Penggunaan apungan dalam css

Atribut

mengapungkan elemen pada halaman dan memaparkannya bersebelahan dengan elemen bersebelahan tanpa menjejaskan reka letak bendalir biasa. Nilai apungan ialah: kiri (apung kiri), kanan (apung kanan), tiada (apung jelas). Unsur terapung mempengaruhi limpahan kandungan, jarak dan ketinggian bekas induk. Kaedah untuk mengosongkan terapung termasuk: membersihkan atribut, elemen terapung dan limpahan: tersembunyi.

Penggunaan apungan dalam CSS

takrifan apungan

Sifat apungan dalam CSS meletakkan elemen di luar kotak kandungannya, menjadikannya terapung pada halaman. Unsur terapung tidak menjejaskan susun atur aliran biasa unsur lain, tetapi muncul bersebelahan dengan elemen bersebelahan.

nilai apungan Atribut

apung boleh menerima nilai berikut:

• kiri: Apungkan elemen ke sebelah kiri bekas.
• kanan: Apungkan elemen ke sebelah kanan bekas.
• tiada: Kosongkan apungan, kembalikan elemen kepada susun atur bendalir biasa.

Penggunaan

Untuk mengapungkan elemen, tambahkan atribut apungan pada gayanya:

<code class="css">element {
  float: left;
}</code>

Menjejaskan

Elemen terapung memberi kesan kepada elemen yang berdekatan:

🜎 kandungan

:
• limpahan
: mungkin melimpahi unsur-unsur bersebelahan.
• Jarak:
Mungkin terdapat jarak antara unsur terapung dan unsur bersebelahan.
• Ketinggian bekas induk:
Jika ketinggian elemen terapung lebih tinggi daripada bekas induk, ketinggian bekas induk akan melaraskan secara automatik untuk menampung elemen terapung. .

Elemen Terapung: Tambahkan elemen terapung selepas elemen terapung, kosongkan elemen terapung ke baris baharu.

limpahan: tersembunyi:

Gunakan sifat limpahan pada bekas induk untuk menyembunyikan unsur terapung dalam bekas.
Contoh
• Kod berikut mencipta bekas dengan dua elemen terapung:

<code class="html"><div class="container">
  <div class="element1">元素 1</div>
  <div class="element2">元素 2</div>
</div></code>

<code class="css">.container {
  display: flex;
}

.element1 {
  float: left;
  background: red;
  width: 100px;
}

.element2 {
  float: right;
  background: blue;
  width: 100px;
}</code>

Output:

<code>元素 1 | 元素 2</code>

Atas ialah kandungan terperinci Penggunaan apungan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!