1、浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
2、我们使用position：fixed，absolute和float都会造成浮动效果。
3、clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
方法1、额外标签clear：both；（额外标签，语义化差，不推荐）
方法2：父级元素 overflow: hidden;此方法通过触发BFC方式，实现清除浮动（不推荐）
方法3、：after clear：both；
方法4.使用before和after双伪元素清除浮动
/* 方法1、额外标签clear：both */
.clear {
clear: both;
}
/* 方法2：父级元素 overflow: hidden; */
.fahter {
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
/* 方法3、：after clear：both */
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
/* 方法4、：before和after双伪元素清除浮动 */
.clearfix:after,.clearfix:before{
content: ""; display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
参考链接：https://cloud.tencent.com/developer/article/1601589