2020-07-16 13:51发布
### 什么是BFC
指页面中的一个渲染区域，并且拥有自己的一套渲染规则来约束块级盒子的布局，他决定了其字标签如何定位以及与其他标签的相互关系和作用
### 怎样生成BFC
1. 根标签
2. float值不为none
3. overflow的值不位visible
4. display的值为inline-block
5. position的值为absoluted和fixed
### BFC的特性
1. 内部标签会在垂直方向一个接一个放置
2. 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
3. 每个标签的左外边距与包含块的左外边界相接触，即使浮动标签也是如此
4. BFC的区域不会与float的标签区域重叠
5.计算BFC高度时，浮动子标签页参与计算
6. BFC就是页面上的一个独立容器，容器里面的标签不会影响到外面的标签
### BFC解决的问题
1. 外边距折叠；
2. 自适应两栏或三栏布局
3. 防止文字环绕
4. 清除浮动
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 nove 的问题《BFC是什么》','http://www.shouhuola.com/answer/23831/46197.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
### 什么是BFC
指页面中的一个渲染区域，并且拥有自己的一套渲染规则来约束块级盒子的布局，他决定了其字标签如何定位以及与其他标签的相互关系和作用
### 怎样生成BFC
1. 根标签
2. float值不为none
3. overflow的值不位visible
4. display的值为inline-block
5. position的值为absoluted和fixed
### BFC的特性
1. 内部标签会在垂直方向一个接一个放置
2. 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
3. 每个标签的左外边距与包含块的左外边界相接触，即使浮动标签也是如此
4. BFC的区域不会与float的标签区域重叠
5.计算BFC高度时，浮动子标签页参与计算
6. BFC就是页面上的一个独立容器，容器里面的标签不会影响到外面的标签
### BFC解决的问题
1. 外边距折叠；
2. 自适应两栏或三栏布局
3. 防止文字环绕
4. 清除浮动
一周热门 更多>