浮动的初衷: 为了实现文字环绕效果，如上图所示☝️
然而在日常使用中，经常用它来进行页面布局等，因此产生一系列意想不到的漏洞~（故而能不用就不要用它）
但是你不用别人会用啊😆，没办法还是得了解浮动的特征以及如何解决浮动带来的漏洞
一、浮动特征
-
浮动元素会破坏自身的linebox，失去高度。如没有其它的元素来撑开父元素，父元素高度就将出现高度塌陷
-
元素设置浮动后，剩余元素重新依据标准流的顺序进行重新排列
二、清除浮动的方案
1） 简单粗暴型，添加最后一个子标签
<div style="clear:both"></div>
2） 父元素设置：overflow:hidden 触发BFC （也需注意实际场景，不然overflow设置也会带来不定时炸弹）
<div style="width:400px; overflow:hidden; border:5px solid green">
<div style="float:left; width: 200px; height:100px; border:1px solid red">1</div>
</div>
3）CSS代码生成一个具有clear属性的元素（通用性强，覆盖面广，无副作用）
<div style="width:400px; border:5px solid green" class="fixedClear">
<div style="float:left; width: 200px; height:100px; border:1px solid red"></div>
</div>
.fixedClear::after {
display:block;
content:'.';
clear:both;
line-height:0;
visibility:hidden;
}
参考：
