徐州市城乡建设局网站,福建seo网站,网站开发课程设计总结,龙之向导外贸网站 网络服务BFC#xff0c;即“块级格式化上下文”#xff08;Block Formatting Context#xff09;#xff0c;是 CSS 中一个重要的概念#xff0c;它指的是一个独立的渲染区域#xff0c;让块级盒子在布局时遵循一些特定的规则。BFC 的存在使得我们可以更好地控制文档流#xff0…BFC即“块级格式化上下文”Block Formatting Context是 CSS 中一个重要的概念它指的是一个独立的渲染区域让块级盒子在布局时遵循一些特定的规则。BFC 的存在使得我们可以更好地控制文档流处理浮动、清除浮动等问题。 BFC 的形成条件包括
根元素或包含它的元素浮动元素元素的 float 不是 none绝对定位元素元素的 position 为 absolute 或 fixed行内块元素元素的 display 为 inline-block表格单元格元素的 display 为 table-cell表格标题元素的 display 为 table-captionoverflow 值不为 visible 的块元素
BFC 的特性包括
内部的 Box 会在垂直方向上一个接一个地放置。Box 垂直方向的距离由 margin 决定属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。每个元素的左外边距与包含块的左边界相接触从左到右即使浮动元素也是如此。BFC 的区域不会与浮动元素重叠。BFC 在页面上是一个独立的容器外面的元素不会影响里面的元素反之亦然。计算 BFC 的高度时浮动元素也参与计算。
BFC 的应用场景包括
1、清除浮动
当一个容器内部有浮动元素时如果没有给容器创建 BFC那么容器的高度将无法被撑开导致一些问题如边框或背景不显示、文字环绕等。可以通过在容器上创建 BFC 来解决这个问题例如可以将容器的 overflow 设置为 hidden。
2、避免 margin 重叠
当两个相邻的盒子都设置了 margin 时它们之间的距离将会是两者 margin 中较大的一个而不是将两者相加。如果将其中一个盒子放入一个 BFC 中可以避免 margin 重叠的问题。
3、实现多栏布局
通过创建 BFC可以将容器划分为独立的区域在这些区域内布局从而实现多栏布局。
4、防止浮动元素遮盖
当一个元素内部有浮动元素时如果该元素没有创建 BFC那么它的高度会缩为0从而导致元素下面的内容被浮动元素遮盖。可以通过在元素上创建 BFC 来防止这种情况的发生。
总之理解 BFC 的概念及其应用场景对于编写复杂的布局代码非常有帮助。通过创建 BFC我们可以解决许多常见的布局问题例如清除浮动、避免 margin 重叠、实现多栏布局等。
更多详细的CSS知识体系可以通过这里了解学习 为帮助到一部分同学不走弯路真正达到一线互联网大厂前端项目研发要求首次实力宠粉打造了《30天挑战学习计划》内容如下
HTML/HTML5CSS/CSS3JavaScript真实企业项目开发云服务器部署上线从入门到精通
PC端项目开发1个移动WebApp开发2个多端响应式开发1个
共4大完整的项目开发 一行一行代码带领实践开发实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理Markdown 记录学习笔记包括真实大厂项目的开发标准和设计规范命名规范项目代码规范SEO优化规范
从蓝湖UI设计稿 到 PC端移动端多端响应式开发项目开发
真机调试云服务部署上线Linux环境下 的 Nginx 部署Nginx 性能优化Gzip 压缩HTTPS 加密协议域名服务器备案解析企业项目域名跳转的终极解决方案多网站、多系统部署使用 使用 Git 在线项目部署
这些内容在《30天挑战学习计划》中每一个细节都有讲到包含视频图文教程项目资料素材等。只为实力宠粉真正一次掌握企业项目开发必备技能不走弯路
过程中【不涉及】任何费用和利益非诚勿扰 。
详细进入了解
30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程
