20170601-BFC(块级格式化上下文)

weknow619 发布于2019-08-01 16:56 / 674人阅读

摘要：的全称是块级格式化上下文。浮动绝对定位的元素定位块容器属性为带有属性该属性值不为和的为的块级元素会在其内部建立新的块级格式化上下文。使用可以解决以下问题父子元素的上下合并问题文字围绕浮动元素的问题和子元素浮动导致父元素高度为的问题。

BFC

BFC的全称是Block Format Content -- 块级格式化上下文。浮动、绝对定位的元素(absolute、fixed定位)、块容器(display属性为inline-block、table、table-cell、table、table-caption)、带有overflow属性(该属性值不为visible和inherit)的display为block的块级元素会在其内部建立新的块级格式化上下文。

BFC的作用：

元素们处于同一个块级格式化上下文时，会遵守相同的规则/格式(例如父子元素的margin会重叠)，但是处于不同的块级格式化上下文时，元素的排列展示遵守的规则/格式是不同的(处于不同的BFC的父子元素的margin不会重叠--->父级元素处于一个BFC中，父级元素内部新建一个BFC)

生成BFC:

设置浮动

设置绝对定位

设置display属性为inline-block、table、table-cell、table-caption

设置overflow属性为 hidden、auto、scroll(不能设置为visible和inherit)

BFC的实际应用：

父子元素的margin-top、margin-bottom会折叠，在父元素内部生成新的BFC，可以阻止父子元素的margin-top、margin-bottom重叠

BFC可以阻止文字围绕浮动元素的情况：下图中的例子中，需要在block02元素内部生成新的BFC，使得block02内部的文字不围绕浮动元素

使用浮动元素可能会出现父容器高度为0的现象，在父容器内部生成新的BFC可以解决该问题

总结：

给块级元素设置某些属性，会在其内部产生新的BFC(块级格式化上下文)，处于相同的BFC的元素会遵守相同的规则/格式。使用BFC可以解决以下问题：父子元素的上下margin合并问题、文字围绕浮动元素的问题和子元素浮动导致父元素高度为0的问题。

私有云服务器托管电脑上下载的视频怎么转换格式块级流中块级 html默认块级

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

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

20170601-BFC(块级格式化上下文)

摘要：的全称是块级格式化上下文。浮动绝对定位的元素定位块容器属性为带有属性该属性值不为和的为的块级元素会在其内部建立新的块级格式化上下文。使用可以解决以下问题父子元素的上下合并问题文字围绕浮动元素的问题和子元素浮动导致父元素高度为的问题。 BFC BFC的全称是Block Format Content -- 块级格式化上下文。浮动、绝对定位的元素(absolute、fixed定位)、块容器(...

PAMPANG 2019-08-29 12:41 评论0 收藏0
视觉格式化模型(Visual formatting model)

摘要：块级盒参与块格式化上下文。行内级盒参与行内格式化上下文块格式化上下文行内格式化上下文相对定位浮动盒就是一个在当前行向左或向右移动的盒。浮动绝对定位绝对定位模型中，一个盒会有相对于其包含块的明确偏移，它会从常规流中全部移除不会影响后面的兄弟。在可视化格式模型(Visual formatting model)当中,文档树中的每个元素根据其盒模型生成0个或多个盒.这些盒的布局由(以下因素)...

jokester 2019-08-30 15:53 评论0 收藏0
CSS盒模型

box model showImg(https://segmentfault.com/img/bVtyKC?w=746&h=455); Margin Border Padding Content width 指定content box 的宽度百分数相对于父容器(包含块)的content box的宽度只有包含块的高度不依赖该元素时，百分比宽度才生效 paddi...

fish 2019-08-30 15:52 评论0 收藏0
深究盒模型的margin合并问题

摘要：即我们常说的脱离文档流的元素。如果一个元素不是流外的，即仍在文档流中的元素，就叫流内元素。两个兄弟盒之间的竖直距离由属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直会合并。如果盒的和相邻，那么可能会被彻底合并。 1.首先，了解一些词汇 - 流内元素? 如果一个元素是浮动的，绝对定位的或者是根元素，那么它就是流外元素。即我们常说的脱离文档流的元素。如果一个元素不是流外的，即仍在文档...

cyqian 2019-08-29 13:47 评论0 收藏0
BFC，包含块，文档流，浮动，定位是个啥关系---CSS视觉格式化模型

摘要：视觉格式化模型浏览器在解析渲染我们所写的内容，顺序渲染普通文档流。渲染结果如下图这儿有一个知识点文档流按我的理解就是在浏览器渲染显示的一个模式，这个模式的特点自上而下，从左到右排列规则。如果不特殊指定，浏览器会默认当前的渲染是按文档流模式。 CSS视觉格式化模型浏览器在解析渲染我们所写的html内容，顺序渲染（普通文档流）。 1 2 3 4 ...

huashiou 2019-08-30 15:55 评论0 收藏0