css：探讨BFC的理解及使用

• 问题：css中清除浮动的方式有哪些？

• 答：
  1、 clear:both
  2、给父级添加样式 overflow:hidden
  3、父级也使用float:left，二者都浮动起来
  4、给父级一个固定高度（使用场景有限，必须知道父级高度）
  5、不拉不拉一大堆.....

• 问题：上面说的第二种方式，给父级设置 溢出隐藏，为什么能够起到清除浮动的效果？

• 答：因为触发了bfc

• 问题：哪些属性会触发bfc效果呢？

• 答：......

针对上面的问题，做下研究及总结：

BFC: 全称 Box Formatting Context（块级格式化上下文）
它是一个独立的渲染区域，

重点： 计算BFC的高度时，浮动元素也参与计算；内部的box会在垂直方向，一个接一个地放置；BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

哪些属性会生成BFC？

• 根元素
• float属性值不为 none
• position属性值为 absolute或fixed
• display属性值为inline-block, table-cell, table-caption, flex, inline-flex
• overflow值不为visible

现在回到上面的问题，第二种和第三种实现方式，都会触发BFC，所以问题得以解决。

反推：是不是只要触发了BFC，就能实现浮动的清除？

答案是肯定的

实验截图： 外层div的样式
内层div样式

根据上面所说的几个属性都试过了，确实是能够实现清除浮动的。

题外话：哪些样式属性会触发浏览器重绘或重排？
查看网站 csstriggers

图中已标出属性触发的场景