对BFC规范的理解

pingan8787 发布于2019-08-30 15:56 / 2037人阅读

摘要：垂直方向的距离由决定。属于同一个的两个相邻的会发生叠加，与方向无关。计算的高度时，浮动子元素也参与计算。形成后出现的常见问题重叠问题浮动相关问题可以解决的问题叠加的问题，要阻止重叠，只要将俩个元素别放在一个中即可。

1. 什么是BFC

BFC（block formatting context）：块级格式化上下文。
简单来说它就是一种会影响元素与元素之间的位置、间距的属性。

2. 如何触发（创建）BFC

float：给元素添加浮动
left right（除了none 以外）

overflow ：给元素添加overflow属性
hidden，auto，scroll（除了visible 以外）

display：给元素添加display属性
table-cell，table-caption，inline-block, flex, inline-flex

position：给元素添加定位
absolute，fixed

3. BFC特性

内部的Box会在垂直方向，从顶部开始一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加，与方向无关。

每个元素的margin-left，与包含块(border-left)的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float的元素区域叠加。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

计算BFC的高度时，浮动子元素也参与计算。

4. BFC形成后出现的常见问题

margin重叠问题

浮动相关问题

5. BFC可以解决的问题

margin叠加的问题，要阻止margin重叠，只要将俩个元素别放在一个BFC中即可。

对于左右布局的元素，我们可以给右侧的元素添加overflow:hidden;或者auto，左侧的是float:left;

可以清除浮动，计算BFC高度，浮动元素不会撑开父元素的高度，我们可以让父元素触发BFC,即：使用overflow:hidden;

GPU云服务器云服务器对python的理解谈谈对php的理解对人工智能的理解对云服务器的理解

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

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

理解 BFC (Block Formatting Model)

摘要：是指块级元素，就是会强制换行的元素，比如。将元素推向左侧。请根据不同的实际情况，选择最合适的方式。再次重申一下，是为子元素创建定位环境。，由于浮动元素占据了一定的宽度，新创建的会因此而变窄。这里只是为了更好地去理解而做一个例子。什么是 BFC W3C 为浏览器规定了三种定位模型：Normal Flow, 浮动, 和绝对定位。本文所介绍的 BFC (Block Formatting M...

Tonny 2019-08-28 18:18 评论0 收藏0
一篇文章带拿下盒模型BFC渲染机制

摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。一个的范围包含创建该上下文元素的所有子元素，但不包括创建了新的子元素的内部元素。走在前端的大道上本篇将自己读过的相关盒模型BFC 文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。一.常见定位方案在讲 BFC 之前，我们先来了解一下常见的...

DangoSky 2019-08-30 15:55 评论0 收藏0
关于CSS中设置overflow属性的值为hidden的相关理解

摘要：非根元素，且其属性是和的元素的包含块它的包含块是由最近的祖先块容器盒的内容区域创建的。如何触发只需要保证满足下面至少一条就会触发根元素设置了值不为的元素设置了属性不为的元素设置了属性不为和的元素设置了的值为和中的任何一个的元素。作者：心叶时间：2018-04-18 17:53 包裹元素剪裁条件是不是包裹元素overflow设置为hidden以后，内部元素如果超过包裹元素的话就会被剪...

codercao 2019-08-29 15:06 评论0 收藏0
关于CSS里BFC特性的理解和应用

摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。而，块级格式化上下文，就是一个块级元素的渲染显示规则。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念...

shixinzhang 2019-08-29 16:34 评论0 收藏0
关于CSS里BFC特性的理解和应用

摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。而，块级格式化上下文，就是一个块级元素的渲染显示规则。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念...

vspiders 2019-08-02 11:24 评论0 收藏0