search

Home  >  Q&A  >  body text

Where to place clear:both - Stack Overflow

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>
     

Why can’t elements with clear attributes be written before floating elements?

曾经蜡笔没有小新曾经蜡笔没有小新2748 days ago1160

reply all(6)I'll reply

  • ringa_lee

    ringa_lee2017-05-19 10:34:04

    If the element with the clear attribute is written before the floating element, then there are no floating elements on both sides of it, so this attribute has no effect

    reply
    0
  • 迷茫

    迷茫2017-05-19 10:34:04

    In the css document, clear:both means:

    Requires the top margin edge of the box to be lower than the bottom margin edge of any previously generated floated boxes in the source document.
    Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

    So elements with the clear:both attribute can be placed after floating elements to close the float.
    I usually clear floats through the pseudo-element of the parent element of the floated element. In your case it is

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

    The after pseudo-element is the last child element of the parent element, so it can clear the float in this block.

    reply
    0
  • 巴扎黑

    巴扎黑2017-05-19 10:34:04

    Let’s first understand the impact of float and the role of clear. Write more demos and feel them, and you will know where to put them. See more documents and more Baidu

    reply
    0
  • PHPz

    PHPz2017-05-19 10:34:04

    clear:both; To be written after the floating element, clear the floating element.

    reply
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:34:04

    Let me talk about my understanding
    clearboth is for itself
    So <p style="clear:both"/> means clearing the left and right floats of this element. If it is placed in front, the last floated element will still affect the parent Element

    reply
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-19 10:34:04

    For clear 属性一定要牢记的是:
    1) 该属性是针对元素本身的,比如说 A B C 三个浮动元素,想要清除C元素左边的浮动,则是将clearacting on C, it is written:

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

    Is that okay? The answer is no. Because clear can only clear the previous float of this element.
    "clear on an element only clears the floats before it in document order. It doesn't clear floats after it."

    2) There are many ways to clear floats, but the most common and most optimized one is to use pseudo elements:

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

    reply
    0
  • Cancelreply