当前位置:首页 > 常用布局 BFC 简单介绍

常用布局 BFC 简单介绍

发布于 2018-05-04 阅读 321 次 BFC

BFC 即 Block Formatting Context
块级格式上下文

形成条件:
1.HTML元素
2.display:inline-block | table-cell|table-option
3.不是overflow:visible
4.不是float:none
5.position不是relative或者static
只需满足其中一条即可形成BFC布局

特点:
1.内部box会在垂直方向一个接一个排列
2.box垂直方向的间距由margin决定,同一个BFC的box垂直方向的margin会重叠
3.每个元素的margin box左边和父元素的左边相接处(对于从左向右的布局是这个样子,否则相反)
4.BFC的区域不会和float box相重叠
5.BFC是一个隔离的容器,即使里面的子元素翻江倒海也不会影响外部元素
6.计算BFC高度的时候,浮动元素也计算在内

作用:
1.清浮动,比如 overflow:hidden的父级元素
例子:
2.两栏布局
3.消除margin的重叠(使用两个独立的BFC)
4.阻止元素被浮动元素覆盖
例子

相关文章