BFC(一)
2015-09-21 21:41
218 查看
一、什么是BFC
BFC(Block formatting context)块级格式化上下文.(bfc中的元素必须是块级元素)
1.触发bfc的方式
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
2.bfc布局规则
1.内部的Box会在垂直方向,一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC中的子元素不会影响到外面的元素影响。反之也如此。
6.计算BFC的高度时,浮动元素也参与计算
在上面的代码中。未加入注释1时,div1和div2位垂直方向相邻的两个块级元素,且与包含框左边接触,加入注释1时,div1进行左浮动,按照bfc布局规则第三条,div1浮动后,div2也会仍然与包含框左边接触。
我们在div2中加入声明 overflow:hidden(注释2),根据触发BFC条件得知,此时div2生成了一个BFC,按照布局规则第4条,div2和div1将不会重合,如果定义了包含框的宽度,则div2的宽度将由包含框的宽度和div1的宽度改变。
BFC(Block formatting context)块级格式化上下文.(bfc中的元素必须是块级元素)
1.触发bfc的方式
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
2.bfc布局规则
1.内部的Box会在垂直方向,一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC中的子元素不会影响到外面的元素影响。反之也如此。
6.计算BFC的高度时,浮动元素也参与计算
在上面的代码中。未加入注释1时,div1和div2位垂直方向相邻的两个块级元素,且与包含框左边接触,加入注释1时,div1进行左浮动,按照bfc布局规则第三条,div1浮动后,div2也会仍然与包含框左边接触。
我们在div2中加入声明 overflow:hidden(注释2),根据触发BFC条件得知,此时div2生成了一个BFC,按照布局规则第4条,div2和div1将不会重合,如果定义了包含框的宽度,则div2的宽度将由包含框的宽度和div1的宽度改变。
相关文章推荐
- 牛客堂常见面试题精讲(一)4
- 匈牙利算法
- Android Studio 导入第三方源码(以及删除)
- 安卓:Loader访问联系人,并使用菜单弹出对话框的形式添加联系人
- javascript 用边框设置立体窗口
- css中padding和magin的区别
- oracle登陆报错:ORA-28000: the account is locked
- 数据结构学习:KMP模式匹配算法
- Android showing LoadingView or EmptyView for Activity or Fragment
- WebServices简介
- 考虑两种情况
- ios开发系列之文件的写入读取,NSUserDefaults存储数据,NSFileManager操作文件和文件夹
- require.js的使用
- 构造与set和get的使用
- 我的Android进阶之旅------>Android项目运行报java.lang.NoClassDefFoundError错误的解决办法
- IIS主机在某些情况下无法播放视频的设置方法
- android 点击button 出现popupwindow的二级联动菜单
- Java关键字instanceof
- nefu1018数字游戏二【DP】
- jQueryEasyUI DateBox的基本使用