Di mana untuk meletakkan clear:both - Limpahan Tindanan

Question

css

.container{
    margin: 30px auto;
    width:600px;
    height: 300px;
 }
.p{
    border:solid 3px #a33;
 }
.c{
    width: 100px;
    height: 100px;
    background-color: #060;
    margin: 10px;
    float: left;
 }

 <p class="container">
      <p class="p">
           <p style="clear:both">//为什么不能写元素之前？
           <p class="c"></p>
           <p class="c"></p>
           <p class="c"></p>                                                                                                            
           <p style="clear:both">

       </p>
     </p>
     

Mengapa elemen dengan atribut yang jelas tidak boleh ditulis sebelum unsur terapung?

Answer 1

Jika elemen dengan atribut yang jelas ditulis sebelum elemen terapung, maka tiada unsur terapung pada kedua-dua belahnya, jadi atribut ini tidak mempunyai kesan

Answer 2

Dalam dokumen css, jelas:kedua-duanya bermaksud:

Memerlukan tepi jidar atas kotak lebih rendah daripada tepi jidar bawah mana-mana kotak terapung yang dijana sebelum ini dalam dokumen sumber.
Memerlukan bahawa tepi sempadan atas kotak berada di bawah tepi luar bawah mana-mana kotak terapung kanan dan kiri terapung yang terhasil daripada unsur-unsur yang lebih awal dalam dokumen sumber.

Jadi elemen dengan clear:kedua-dua atribut boleh diletakkan selepas elemen terapung untuk menutup terapung.
Saya biasanya membersihkan terapung melalui unsur pseudo unsur induk unsur terapung. Dalam kes anda ia adalah

.p:after{
    clear:both;
    display:block;
    content:"";
}

Unsur pseudo selepas ialah elemen anak terakhir bagi elemen induk, jadi ia boleh mengosongkan apungan dalam blok ini.

Answer 3

Mari kita fahami dahulu kesan apungan dan peranan jernih. Tulis lebih banyak demo dan rasakannya, dan anda akan tahu di mana untuk meletakkannya. Lihat lebih banyak dokumen dan lebih banyak lagi Baidu

Answer 4

jelas:kedua-duanya; Untuk ditulis selepas unsur terapung, kosongkan unsur terapung.

Answer 5

Biar saya bercakap tentang pemahaman saya
clearboth adalah untuk dirinya sendiri
Jadi <p style="clear:both"/> bermaksud membersihkan apungan kiri dan kanan elemen ini diletakkan di hadapan Kemudian elemen terapung terakhir masih akan menjejaskan elemen induk

Answer 6

Apa yang anda mesti ingat tentang atribut clear ialah: clear 属性一定要牢记的是：
1） 该属性是针对元素本身的，比如说 A B C 三个浮动元素，想要清除C元素左边的浮动，则是将clear作用在C上， 写成:

  C {
     clear : left
  }   
当然你会想，写成
  B {
      clear : right;
  } 

行不行呢？答案是不行。因为clear 1) Atribut ini adalah untuk elemen itu sendiri, contohnya, terdapat tiga elemen terapung A B C. Jika anda mahu kosongkan elemen terapung di sebelah kiri elemen C , kemudian clear digunakan pada C dan ditulis sebagai:

    Parent :after{
        clear:both;
        display:block;
        content:"";
    }

Boleh tak? Jawapannya tidak. Kerana clear hanya boleh mengosongkan apungan sebelum elemen.

"jelas pada elemen hanya membersihkan terapung sebelum ia dalam susunan dokumen. Ia tidak membersihkan terapung selepasnya."

2) Terdapat banyak cara untuk membersihkan terapung, tetapi yang paling biasa dan dioptimumkan ialah menggunakan elemen pseudo: #🎜🎜# rrreee