BFC(块级格式化上下文)的特点和应用场景

XiNGRZ 发布于2019-08-30 11:14 / 3241人阅读

摘要：的特点是元素拥有独立的渲染区域元素内部的内容边距浮动元素等不会影响到外部元素。

BFC(Block Formatting Context)的特点是元素拥有独立的渲染区域,元素内部的内容(边距,浮动元素等)不会影响到外部元素。

哪些情况下会触发BFC

设置overflow属性,值不为visible

设置float属性,值不为none

设置position属性,值为absolute或fixed

设置display属性,值为inline-block, table-cell, table-caption, flex, inline-flex, grid,或者inline-grid

BFC的典型应用场景: 解决块级元素的塌陷问题(Collapsing)

块级元素的垂直塌陷: 当两个相邻的块级元素拥有上下方向相邻的边距时(例如:上面的元素拥有margin-bottom值,下面的元素拥有margin-top值),此时上下元素之间的间隙不是两者边距之和,而是两者之中的值较大的一个

块级元素的包含塌陷: 当块级父元素没有boder,padding值,块级子元素有margin-top值时,子元素的margin-top值会在父元素的外部生效,也就是整个父元素区域会向下偏移,这个偏移值由子元素的margin-top值决定

此外,BFC还可以用于清除浮动带来的影响等

云服务器 idc机房托管 cdn和应用场景云计算的应用场景超融合的应用场景 webrtc的应用场景

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114866.html

BFC(块级格式化上下文)的特点和应用场景

摘要：的特点是元素拥有独立的渲染区域元素内部的内容边距浮动元素等不会影响到外部元素。 BFC(Block Formatting Context)的特点是元素拥有独立的渲染区域,元素内部的内容(边距,浮动元素等)不会影响到外部元素。哪些情况下会触发BFC 设置overflow属性,值不为visible 设置float属性,值不为none 设置position属性,值为absolute或fi...

testbird 2019-08-02 15:20 评论0 收藏0
BFC及应用学习总结

首先回顾一下普通流，普通流对后面进一步了解BFC有很大的作用普通流（Normal Flow）普通流是网页中元素的默认排版，默认情况下块级元素：以block flow direction排列（每一个块级元素新起一行，即以从上往下以列排列）行内元素：不会另起一行，一个接一个排布，直到空间不足脱离普通流 CSS有以下几种方法使元素脱离普通流 float float能够使元素向某一方向偏移，...

zorpan 2019-08-30 15:56 评论0 收藏0
CSS布局相关基本概念

摘要：当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间基于文档流，理解定位模式相对定位，即相对于元素在文档流中位置进行偏移。绝对定位，即完全脱离文档流，相对于属性非值的最近父级元素进行偏移。主要参考文档：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 测试例子：https...

wangxinarhat 2019-08-30 14:15 评论0 收藏0
深入css布局 (3)完结 — margin问题与格式化上下文

深入css布局(3) — margin问题与格式化上下文在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。 css布局篇已经讲个2篇了，前面我们深入讲解了盒模型与box-sizing, 元素分类，行框，定位与浮动等知识点。今天呢，我们把css布局篇做一个结尾，最后...

blankyao 2019-04-23 13:42 评论0 收藏0