python - Où placer clear: les deux

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>
     

Pourquoi les éléments avec l'attribut clear ne peuvent-ils pas être écrits avant les éléments flottants ?

Answer 1

L'élément avec l'attribut clear est écrit avant l'élément flottant, il n'y a donc aucun élément flottant des deux côtés de celui-ci, donc cet attribut n'a aucun effet

Answer 2

Dans le document CSS, clear:both signifie:

Nécessite que le bord de la marge supérieure de la boîte soit inférieur au bord de la marge inférieure de toutes les boîtes flottantes générées précédemment dans le document source.
Nécessite que le bord supérieur de la boîte soit en dessous du bord extérieur inférieur de toutes les boîtes flottantes à droite et à gauche résultant d'éléments antérieurs dans le document source.

Ainsi, les éléments avec l'attribut clear:both peuvent être placés après les éléments flottants pour fermer le flotteur.
J'efface généralement les flotteurs via le pseudo-élément de l'élément parent de l'élément flottant. Dans votre cas c'est le cas

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

Le pseudo-élément after est le dernier élément enfant de l'élément parent, il peut donc effacer le float dans ce bloc.

Answer 3

Commençons par comprendre l’impact du float et le rôle du clear. Écrivez plus de démos et ressentez-les, et vous saurez où les mettre. Voir plus de documents et plus de Baidu

Answer 4

clear:both; À écrire après l'élément flottant, effacez l'élément flottant.

Answer 5

Laissez-moi parler de ma compréhension
clearboth est pour lui-même
Donc <p style="clear:both"/> signifie effacer les flotteurs gauche et droit de cet élément. S'il est placé devant, le dernier élément flottant le sera. affecte toujours l'élément parent

Answer 6

Ce que vous devez retenir à propos de l'attribut clear est : clear 属性一定要牢记的是：
1） 该属性是针对元素本身的，比如说 A B C 三个浮动元素，想要清除C元素左边的浮动，则是将clear作用在C上， 写成:

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

行不行呢？答案是不行。因为clear 1) Cet attribut est pour l'élément lui-même, par exemple, il y a trois éléments flottants A B C. Si vous souhaitez effacez l'élément flottant à gauche de l'élément C, puis clear est appliqué à C et s'écrit :

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

Est-ce que ça va ? La réponse est non. Parce que clear ne peut effacer que le flottant avant l'élément.

"clear sur un élément efface uniquement les flottants qui le précèdent dans l'ordre du document. Il n'efface pas les flottants qui le suivent."

2) Il existe de nombreuses façons d'effacer les flottants, mais la plus courante et la plus optimisée consiste à utiliser des pseudo-éléments : #🎜🎜# rrreee