五、BFC
作者:互联网
1.理解BFC
BFC,全称“块级格式化上下文”(block formatting context),可以为元素提供一个独立的空间,将元素内部的内容与外部的上下文隔离开,不会相互影响。这种隔离为创建BFC的元素做了以下事情:
- 包含了内部所有元素的上下外边距,它们不会跟BFC外面的元素产生外边距折叠(内部元素与其创建BFC的容器之间也不会产生外边距折叠);
- 包含了内部所有的浮动元素,有效解决了容器高度塌陷的问题;
- 不会跟BFC外面的浮动元素重叠。
2.如何触发
给元素添加以下的任意属性值都会创建BFC:
- float:left或right,不为none即可;
- overflow:hidden、auto或scroll,不为visible即可;
- display:inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid;
- position:absolute或fixed;
标签:BFC,flex,元素,grid,table,inline 来源: https://www.cnblogs.com/evil-shark/p/16420120.html