CSS parent border collapse problem

The parent border collapse problem

solution

1. Increase the height of the parent element

   #father{
         
         
       border：1px solid;
       height:800px;
   }
   

2. Add an empty div tag to clear the float

   <div class="clear"></div>
   
   .clear{
         
         
       clear:both;
       margin:0;
       padding:0;
   }
   

3. overflow

   在父级元素中增加一个: overflow:hidden;
   

4. Add a pseudo-class to the parent class: after

   #father:after{
         
         
       content:'';
       display:block;
       clear:both;
   }
   

summary:

1. Add an empty div after the floating element

   Try to avoid empty divs in simple code

2. Set the height of the parent element

   Simple elements will be restricted if they have height

3. overflow

   Avoid using some simple drop-down scenarios

4. Add a pseudo class after the parent class: after (recommended)

   The writing method is a little more complicated, but there are no side effects, so it is recommended.