CSS父级边框塌陷问题

clear属性

/*
    clear: left; 左侧不允许有浮动元素
    clear: right; 右侧不允许有浮动元素
    clear: both; 两侧不允许有浮动元素
*/

解决方案

1. 增加父级元素的高度

   简单，缺点：元素假设有了固定的高度，就会被限制

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

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

   简单，缺点：代码中尽量避免空div

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

3. overflow

   简单，缺点：下拉的一些场景避免使用

   //在父级元素中增加一个overflow: hidden;
   #father{
       border:1px #000 solid;
       overflow: hidden;
   }
   

4. 父类添加一个伪类: after （推荐）

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

   #father{
       border:1px #000 solid;
   }
   #father:after{
       content: ‘‘;
       display: block;
       clear: both;
   }
   

CSS父级边框塌陷问题

原文：https://www.cnblogs.com/xiaojiaoya00/p/13585844.html