开始总结知识体系，下面是个人理解
float
设置float 的box 会脱离文档流，但是内部的元素不会脱离文档流，这就是为什么会产生文字围绕图片的效果。
设置float的元素会产生一个块级框（无论会计元素还是行内元素),都可设置宽和高。
浮动元素相对的位置是相对父元素的框(包含内边框），和上一个浮动元素的位置相对浮动。
浮动元素会造成父元素的内容的塌陷
如果浮动元素的父元素也是浮动元素，则不会产生塌陷
clear
在浮动元素之后添加元素，设置clear 属性。
直接添加元素法
伪元素 :after /:befor {content:””,cisibility:hidden,dispay:block,clear:blth,height:}
父元素闭合浮动
父元素设置 overflow :hidden /auto;
原理 触发了
BFC ( Block formatting contexts） （块级格式化上下文）
BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。
浮动和绝对定位不与任何元素产生 margin 折叠
原因：浮动元素和绝对定位元素不与其他盒子产生外边距折叠是因为元素会脱离当前的文档流，两个margin不是邻接的条件，又因为浮动和绝对定位会使元素为它的内容创建新的BFC，因此该元素和子元素所处的BFC是不相同的，因此也不会产生margin的折叠。
触发条件：
float 除了none 以外的值
overflow :除了visiable 以外
position为 absolute,fixed
display:为table-cell,table-caption,inline-block
不过还是有一点要注意： display:table 本身不会创建BFC，但是会产生匿名框，匿名框会产生BFC，所以害死会产生BFC
特性
防止外边距塌陷（如果两个框属于一块级化上下文，会产生外边距叠加，可以设置BFC来阻止外边距的叠加，
外边距叠加: 相邻 的外边距都是正数，则区较大的，都为负值，取绝对值较大的，一正一负，两者相加。
不会重叠浮动元素
参考文档： css Float/BFC
[深入理解BFC](https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html)