css（探讨BFC的理解及使用）
- 问题：css中清除浮动的方式有哪些？
- 答：
1、 clear:both
2、给父级添加样式 overflow:hidden
3、父级也使用float:left，二者都浮动起来
4、给父级一个固定高度（使用场景有限，必须知道父级高度）
5、不拉不拉一大堆.....
- 问题：上面说的第二种方式，给父级设置 溢出隐藏，为什么能够起到清除浮动的效果？
- 答：因为触发了bfc
- 问题：哪些属性会触发bfc效果呢？
- 答：......
它是一个独立的渲染区域，
重点： 计算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
文章图片
图中已标出属性触发的场景 【css（探讨BFC的理解及使用）】
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 3.css浮动
- 探讨销售方式
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- CSS兼容性笔记
- 微信小程序____CSS篇之定位（position）及浮动（float）
- 18，页面优化
- Web前端如何学习?