对BFC规范的理解
2021/6/17 10:56:30
本文主要是介绍对BFC规范的理解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
什么是BFC?
BFC 全称为 块级格式化上下文(Block Fromatting Context),是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域,也是浮动层元素进行交互的区域。简单的来说,它就是一种会影响元素与元素之间的位置、间距的属性。
BFC 的特性
1.内部的box会在垂直方向,从顶部一个接一个的放置
2.box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生叠加
3.每个元素的margin box的左边,与包含块border box的左边相接触
4.BFC的区域不会与float box叠加
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
6.计算BFC的高度时,浮动元素也会参与计算
形成BFC的条件
1.float:给元素添加浮动(left,right)
2.position:给元添加定位(absolute,fixed)
3.display:给元素添加display(inline-block,table-cells,table-captions)
4.overflow:给元素添加overflow(hidden,auto,scroll)
BFC形成后出现的常见问题
1.margin重叠问题
2.浮动相关问题
BFC可以解决的问题
1.margin叠加的问题,要阻止margin重叠,只要将两个元素别放在一个BFC中即可
2.对于左右布局的元素,我们可以给右侧的元素添加overflow :hidden或auto,左侧的是float:left
3.可以清除浮动,计算BFC高度,浮动元素不会撑开父元素的高度,我们可以让父元素触发BFC,即:使用overflow:hidden;
这篇关于对BFC规范的理解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04el-table 开启定时器下,表格的选中状态会消失是什么原因-icode9专业技术文章分享
- 2024-10-03如何安装和初始化飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03如何安装 App 并连接到飞牛 NAS?-icode9专业技术文章分享
- 2024-10-03如何安装飞牛 TV 并连接到影视服务器?-icode9专业技术文章分享
- 2024-10-03如何在PVE和ESXI上安装飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS安装系统异常情况处理-icode9专业技术文章分享
- 2024-10-03飞牛NAS如何创建存储空间?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS硬盘会自动休眠吗?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何安装飞牛影视和创建媒体库?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何为家人朋友开通影视账号?-icode9专业技术文章分享