Apakah fungsi clear dalam css

Atribut jelas CSS (jelas) digunakan untuk mengawal hubungan antara elemen dan elemen terapung untuk memastikan elemen tidak terapung tidak akan mengalir di bawah unsur terapung. Penggunaan adalah seperti berikut: tiada: Jangan clear floats left: Clear left floats right: Clear right floats both: Clear left and right floats

Peranan atribut clear dalam CSS

Atribut yang jelas ialah digunakan untuk mengawal apungan unsur Hubungan antara unsur memastikan unsur tidak terapung tidak mengalir di bawah unsur terapung.

Penggunaan

<code class="css">clear: none | left | right | both;</code>

• tiada: Nilai lalai, jangan clear float.
• kiri: Kosongkan elemen terapung di sebelah kiri.
• kanan: Kosongkan elemen terapung di sebelah kanan.
• kedua-duanya: Kosongkan elemen terapung di bahagian kiri dan kanan.

Fungsi

Apabila elemen terapung, ia akan diletakkan di luar aliran dokumen, dan elemen tidak terapung seterusnya akan mengalir di bawah elemen terapung. Atribut jelas menetapkan nilai jelas elemen tidak terapung untuk memaksanya bermula di atas elemen terapung.

Sebagai contoh, kod berikut akan memastikan elemen perenggan tidak mengalir di bawah imej terapung:

<code class="css">p {
  clear: both;
}</code>

Contoh

Andaikan kod HTML berikut:

<code class="html"><div class="container">
  <div class="image float-left"></div>
  <p>段落</p>
</div></code>

Jika atribut jelas tidak ditetapkan, elemen perenggan akan mengalir di bawah elemen imej di bawah, menghasilkan susun atur yang mengelirukan.

Dengan menetapkan atribut yang jelas, anda boleh memastikan bahawa elemen perenggan bermula di atas elemen imej:

<code class="css">.container {
  width: 500px;
}

.image {
  float: left;
  width: 200px;
  height: 200px;
  background: #f00;
}

p {
  clear: both;
}</code>

Dalam contoh ini, elemen perenggan dipaksa untuk bermula di atas elemen imej, menjadikan reka letak jelas dan jelas.

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