float坍塌：（父容器高度坍塌，背景或边框不能正确显示）解决方法：clear与BFC
父元素内部末尾增加一个额外标签，如空div，clear:both对父容器设置overflow: hidden/auto，触发其BFC缺点：设置hidden会导致超出部分直接被隐藏，，而设置auto的话超出部分会生成一个滚动条，影响视觉效果。使用伪类元素，再用伪类元素清除浮动，类似方法1 .father:after{content:'';clear:both;display:block/table;}此法要注意的是，必须是after伪元素，且该伪类元素必须为block元素，原因是after伪元素在其父容器的其他标签的最后添加一个元素，渲染顺序排在了其父容器内部的最后，然后设置block元素是为了不让其它元素与其一排，再对其设置清除浮动，父容器自然就被这个after伪元素撑开了高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float坍塌</title> </head> <body> <p>1.新增空div clear:both</p> <div style="background: lightgrey"> <div style="float: left;height: 100px;"> aaa </div> <div style="clear: both;"></div> </div> <br> <p>2.父元素 :after</p> <style>#father:after{content:'';clear:both;display:table;}</style> <div id="father" style="background: lightgrey;"> <div id="son" style="float: left;height: 100px;"> #father:after{content:'';clear:both;display:block/table;}必须要有display:block </div> </div> <br> <p>3.父元素 overflow:hidden/auto.触发其BFC 缺点：设置hidden会导致超出部分直接被隐藏，且不占据文档流位置，而设置auto的话超出部分会生成一个滚动条，影响视觉效果。</p> <div style="background: lightgrey;overflow: hidden"> <div style="float: left;height: 100px;"> 父元素 overflow:hidden/auto.触发其BFC </div> </div> </body> </html>浮动及清除浮动的4种方式：https://www.cnblogs.com/xiaoqiang001/p/3908257.html
4.声明清除（第四种，是大部分大型网站常用的，比如新浪 淘宝 的清除浮动的效果。）
.clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ /*照顾ie6*/ zoom:1; }
https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
https://www.cnblogs.com/nujufoul/p/7092520.html
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
（它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。）
