建站图标素材,建站是什么专业,投资建设集团网站首页,wordpress无法点上传什么是BFC#xff1f;怎么触发BFC#xff1f;BFC有什么作用#xff1f;可以解决哪些问题#xff1f;
1.什么是BFC
先看下官方的解释#xff1a; 区块格式化上下文#xff08;Block Formatting Context#xff0c;BFC#xff09;是 Web 页面的可视 CSS 渲染的一部分怎么触发BFCBFC有什么作用可以解决哪些问题
1.什么是BFC
先看下官方的解释 区块格式化上下文Block Formatting ContextBFC是 Web 页面的可视 CSS 渲染的一部分是块级盒子的布局过程发生的区域也是浮动元素与其他元素交互的区域。 官方的描述有点抽象其实可以把BFC理解成就是css的块级作用域。 具有 BFC 特性的元素可以看作是隔离了的独立容器容器里面的元素不会在布局上影响到外面的元素并且 BFC 具有普通容器所没有的一些特性。 2.怎么触发BFC
下列方式会创建块格式化上下文
文档的根元素html。浮动元素即 float 值不为 none 的元素。绝对定位元素position 值为 absolute 或 fixed 的元素。行内块元素display 值为 inline-block 的元素。overflow 为hidden,scroll,auto的元素值不为 visible 或 clip 的块级元素。display 值为 flow-root 的元素。弹性元素display 值为 flex 或 inline-flex 元素的直接子元素如果它们本身既不是弹性、网格也不是表格容器。网格元素display 值为 grid 或 inline-grid 元素的直接子元素如果它们本身既不是弹性、网格也不是表格容器。表格单元格display 值为 table-cellHTML 表格单元格默认值。表格标题display 值为 table-captionHTML 表格标题默认值。匿名表格单元格元素display 值为 tableHTML 表格默认值、table-row表格行默认值、table-row-group表格体默认值、table-header-group表格头部默认值、table-footer-group表格尾部默认值或 inline-table。contain 值为 layout、content 或 paint 的元素。多列容器column-count 或 column-width (en-US) 值不为 auto且含有 column-count: 1 的元素。column-span 值为 all 的元素始终会创建一个新的格式化上下文即使该元素没有包裹在一个多列容器中规范变更、Chrome bug display: flow-root 是 CSS 中的一个属性它可以让元素块状化同时包含格式化上下文BFC。当应用 display: flow-root 声明后无论是内联元素还是原本就是块级元素都会变成块级元素并建立新的块级格式上下文BFC 希望这个回答对你有所帮助
3.BFC可以解决哪些问题
包含内部浮动。排除外部浮动。阻止外边距重叠。 参考链接
区块格式化上下文 - Web 开发者指南 | MDN (mozilla.org)
掌握外边距折叠 - CSS层叠样式表 | MDN (mozilla.org)
10 分钟理解 BFC 原理 - 知乎 (zhihu.com)
什么是BFC面试前看这一篇就够了 - 知乎 (zhihu.com)
快速了解CSS display:flow-root声明 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
深入理解 CSS 中的外边距折叠及 BFC - 掘金 (juejin.cn)
