<div class="box1"><div class="inbox"></div></div>
    <div class="box2"></div>
    <div class="box3"><div class="inbox2"></div></div>Copy the code
  • To enable BFC mode, use Overflow :hidden1 on the parent element, and use Zoom :1 compatible with IE6 below
.inbox {
        width: 100px;
        height: 100px;
        background-color: black;
        float: left;
      }
      .box1 {
        overflow: hidden;
        border: 5px solid red;
      }Copy the code


  • Clear float effect Optional Value None Default not clear Left Clear left RGHT clear right BOTH Clear both
.box2 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: rgb(100, 52, 52);
      }

      .box3 {
        clear: both;
        border: 5px solid skyblue;
        zoom: 1;
      }
    
      .inbox2 {
        float: left;
        width: 300px;
        height: 300px;
        background-color: rgb(68, 153, 156);
      }Copy the code


  • Set pseudo class after add blank use display set to block element, and finally use clear to clear floating effects this method also requires ZOOM :1 compatible with IE6
.box3:after {
        content: "";
        display: block;
        clear: both;
      } Copy the code



  • Set after and before pseudo-classes, add blank, use display to set as table elements, use clear to clear floating, perfect solution to the height of collapse and parent element margin overlap problem incompatible ie6, use Zoom :1 to complete compatibility
.box3:after,
 .box3:before {
        content: "";
        display: table;
        clear: both;
      }Copy the code