1. 清除浮动

清除浮动其实叫做闭合浮动更合适，因为是把浮动的元素圈起来，让父元素闭合出口和入口不让他们出来影响其他的元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}
/*属性值为left,清除左侧浮动的影响
  属性值为right,清除右侧浮动的影响
  属性值为both,同时清除左右两侧浮动的影响*/

1.1 额外标签法

1.1.1 末尾标签法

通过在浮动元素的末尾添加一个空的标签。这是W3C推荐的做法，虽然比较简单，但是添加了无意义的标 签，结构化比较差，所以不推荐使用。下面三种写法都适用：

 <div style="clear:both"></div>
 	.clear { clear:both }
<div class="clear"></div>
	.clear{ clear:both }
<br class="clear" />    <!--也可以使用br等别的块级元素来清除浮动-->

1.1.2 内部标签法

把div放进父盒子里，盒子会撑开，一般也不会用。

1.2 overflow

给父级元素添加overflow样式方法。
代码比较简洁，可以通过触发BFC方式，但是因为本身overflow的本质是溢出隐藏的效果，所以有的时候也会有一些问题存在，比如内容增多的时候不会自动换行导致内容被隐藏掉，无法显示出要溢出的元素。

.father {
        overflow: auto;  
      /* 加上这句话，就可以清除浮动   overflow = hidden|auto|scroll 都可以实现*/
}

1.3 伪元素法

1.3.1 使用after伪元素清除浮动

after是在父元素中加一个盒子，这个元素是通过css添加上去的，符合闭合浮动思想，结构语义化正确。
父元素中加一个类名为clearfix 。但是这个方法IE6，7不识别，要进行兼容，使用zoom:1触发 hasLayout来清除浮动。（不过ie在2022/6/16正式宣布退役了，哈哈哈不用考虑兼顾这个老六了）

.clearfix:after{
    content:".";  /*尽量不要为空，一般写一个点*/
    height:0;     /*盒子高度为0，看不见*/
    display:block;    /*插入伪元素是行内元素，要转化为块级元素*/
    visibility:hidden;      /*content有内容，将元素隐藏*/
    clear:both;  
}

1.3.2 使用before和after双伪元素清除浮动（推荐）

完全符合闭合浮动思想的方法。

.clearfix:before, .clearfix:after {
    content: ""; 
    display: table;
}
.clearfix:after {
    clear: both;
}

2. padding , margin 百分比单位依据

在CSS 盒模型中，依据CSS2.2文档，margin与padding的百分比指定值时，一律参考包含盒的宽度。

.father{
    height: 100px;
    width: 200px;
    border: solid;
}

.son{
    margin: 20%;
    padding: 20%;
    width: 50%;
    height: 50%;
}

3. 父子边距重合

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

父子元素的边界重叠：

<style>
  .parent {
    background: #e7a1c5;
  }
  .parent .child {
    background: #c8cdf5;
    height: 100px;
    margin-top: 10px;
  }
</style>
<section class="parent">
  <article class="child"></article>
</section>