- BFC
描述：
- BFC（Block Formatting Content）,块级格式化上下文（BlockFormatting Contexts, BFC）
- CSS2.1规范中提出的一个概念，定义的是页面中的一块渲染区域
- 同一个格式化上下文内和不同格式化上下文之间的定位方式都会发生变
满足以下任意一个条件可以创建一个新的BFC
- 根元素
- 脱离普通文档流的元素（浮动、绝对定位、固定定位）
- 非块级元素（display属性值为inline-block、table、flex等）；
- overflow属性值不为visible的块级元素
- BFC也可以理解为标签中的一个属性，则个属性可以开启或关闭
- 当开启BFC属性时，该元素由如下影响：
1、父元素的垂直外边距不会和子元素重叠
2、开启BFC的元素不会被浮动元素覆盖
3、开启BFC的父元素可以包含浮动元素
如何开启BFC：
1、设置元素浮动
2、设置元素定位（绝对定位、固定定位）
3、设置元素：display：inline-block，table、flex
4、设置overflow值为非：visible
例题1、使用BFC解决外边距传递
使用特性：
- 开启BFC的父元素可以包含浮动元素
如何开启
- overflow: hidden; 副作用小
| .outer { width: 200px; height: 200px; background-color: red; overflow: hidden; } .inner { width: 100px; height: 100px; background-color: #bfc; margin-top: 100px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html> |
例题2、使用BFC解决重叠
使用特性：
- 开启BFC的父元素可以包含浮动元素
如何开启
- overflow: hidden; 副作用小
| .box { width: 200px; height: 200px; background-color: red; margin-bottom: 100px; } .box2{ width: 200px; height: 200px; background-color: #bfc; margin-top: 100px; } .outer {
overflow: hidden;
} </style> </head> <body> <div class="outer"> <div class="box"></div> </div> |
例题3、 BFC解决元素覆盖
使用特性：
- 开启BFC的元素不会被浮动元素覆盖
开启BFC：
- display：inline-block
| .box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 100%; height: 200px; background-color: #bfc; display: inline-block; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html> |
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
