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

常用布局 BFC 简单介绍

发布于 2018-05-04 阅读 442 次 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.阻止元素被浮动元素覆盖 [例子](https://www.w2le.com/demo/1.html "例子")
相关文章