CSS BFC特性(块级格式化上下文)

chanthuang 发布于2019-08-02 14:09 / 2468人阅读

摘要：元素的特性全称为，中文为块级格式化上下文。应用之利用特性解决塌陷问题塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个，另一个设置，此时两个元素的就会发生重叠。

1、元素的BFC特性

BFC全称为”Block Formartting Context”，中文为”块级格式化上下文”。它是页面中的一块独立的渲染环境，并且有一套渲染规则，
它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相互作用。

BFC布局规则：

1）bfc内部的元素会在垂直方向，一个接一个地放置
2）盒子垂直方向的距离有margin决定，属于同一个bfc的两个相邻元素的margin会发生重叠
3）每个盒子的左外边缘(margin-left)会与其父元素的左边缘(border-left)相接触
4）bfc的区域会通过变窄来自适应而不会与float元素重叠在一起
5）bfc的高度计算时，浮动元素也参与计算。即创建了新的bfc的元素的高度会把内部浮动元素的高度也算进去
6）bfc是页面上一个隔离的独立容器，容器内的子元素不会影响到外面的元素；同理容器内的子元素也不会影响到父元素外面的
其他元素。

创建BFC的条件：

a）html元素
b）float的值不为none
c）overflow的值为auto、hidden或scroll
d）display的值为table-cell、inline-block、table-caption、flex、inline-flex
e）position的值不为relative和static

2、BFC作用----理解BFC(个人理解)

1、因为bfc内部的元素与外部的元素绝对不会互相影响，因此当bfc元素的兄弟元素有浮动时，它不应该影响bfc内部元素的布局，
所以bfc会通过变窄来自适应，而不会与浮动元素发生重叠；

2、同样的，当bfc内部有浮动时，为了不影响外部元素的布局，bfc计算高度时会把浮动元素的高度也计算进去。
利用bfc避免margin重叠也是同样的道理。

3、BFC应用之：利用bfc特性实现左侧不固定，右侧也不固定的布局

图片来自：张鑫旭--粉丝群第1期CSS小测点评与答疑
如图：这种布局在移动端一般比较常见，左侧文字宽度不固定，右测文字宽度不固定，文字断行后也要保持同样的行距。在移动端中可以使用flex布局，grid布局，如果不使用css3布局，我们能否实现呢？答案是可以的，可以使用 浮动+bfc 特性！




    手机系统
    Android
    登录方式
    QQ互联登录
    绑定事件
    2019-01-02 00:01
    其他
    FAsfsdafsadfasdfSDsadfsadfsd4545454555454545sdafsdf
    备注
    如果需要修改绑定，请联系HR进行修改！

下图是dd创建了bfc与未创建bfc的对比：

由图片可以看出，创建了bfc的dd的宽度自适应的变窄了，而未创建bfc的dd却与浮动的dt重合了。

4、BFC应用之：利用bfc特性解决margin塌陷问题

margin塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个margin-bottom，另一个设置margin-top，此时两个元素的margin就会发生重叠。
margin重叠规则：

1）margin的值都为正数时，取它们之间较大的值
2）margin的值都为负数时，取两个margin绝对值中较大的值
3）两个margin一正一负时，取两个margin相加的和

margin塌陷与不塌陷效果：




    
        margin未塌陷
        margin: 20px 0;
        margin: 20px 0;
    
    
        margin塌陷
        margin: 20px 0;
        
            margin: 20px 0;

6、参考文章

1、https://www.zhangxinxu.com/wo... (引导文章)
2、https://www.zhangxinxu.com/wo...
3、https://www.w3cplus.com/css/u...
4、https://blog.csdn.net/w362427...
5、https://blog.csdn.net/shadow_...

云服务器 GPU云服务器忽略css特性电脑上下载的视频怎么转换格式格式化css文件 css格式

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

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

BFC原理详解

摘要：最常见的有简称和简称。可以把它理解成是一个独立的容器，并且这个容器的里的布局，与这个容器外的毫不相干。根据布局规则第二条垂直方向的距离由决定。参考前端精选文摘神奇背后的原理之详解深入理解流体特性和特性下多栏自适应布局布局一.BFC是什么在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 1.BOX：CSS布局的基本单位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 评论0 收藏0
CSS BFC特性(块级格式化上下文)

摘要：元素的特性全称为，中文为块级格式化上下文。应用之利用特性解决塌陷问题塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个，另一个设置，此时两个元素的就会发生重叠。 1、元素的BFC特性 BFC全称为Block Formartting Context，中文为块级格式化上下文。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相...

岳光 2019-08-30 15:55 评论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
CSS中重要的BFC

摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...

plus2047 2019-08-29 14:20 评论0 收藏0