CSS父级边框塌陷问题

父级边框塌陷问题

解决方案

1. 增加父级元素高度

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

2. 增加 一个空的div标签 ，清除浮动

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

3. overflow

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

4. 父类添加一个伪类：after

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

小结：

1. 浮动元素后面增加空div

   简单 代码中尽量避免空div

2. 设置父元素的高度

   简单 元素有了高度 就会被限制

3. overflow

   简单 下拉的一些场景避免使用

4. 父类后面添加一个伪类: after(推荐)

   写法稍微复杂一点，但是没有副作用，推荐使用。