-
问题：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
图中已标出属性触发的场景
网友评论