Block Formatting Contexts: 块级元素格式化上下文
块级元素如何对它的内容(子元素:也是一个块元素)进行布局,以及与其它元素(与内容同级别)的关系和相互作用

普通文档流的布局规则
1、浮动的元素是不会被父级计算高度
2、非浮动元素会覆盖浮动元素的位置
3、margin会传递给父级
4、两个相邻的元素上下margin会重叠

BFC的布局规则
1、浮动的元素会被父级计算高度(父级触发了BFC)
2、非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
3、margin不会传递给父级(父级触发了BFC)
4、两个相邻的元素上下margin不会重叠(给其中一个元素添加一个单独的父级,然后让他的父级触发了BFC)

触发BFC的方式(以下任意一条就可以)
1、float的值不为none
2、overflow 除了 visible 以外的值(hidden,auto,scroll)
3、display的值为table-cell、table-caption和inline-block之一
4、绝对定位元素,position(absolute,fixed);

BFC的应用

1、包含浮动元素

问题案例:高度塌陷问题:在通常情况下父元素的高度会被子元素撑开,而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌,上下边界重合。这时就可以用bfc来清除浮动了。

2、不被浮动元素覆盖

问题案例: div浮动兄弟遮盖问题:由于左侧块级元素发生了浮动,所以和右侧未发生浮动的块级元素不在同一层内,所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden,触发bfc来解决遮挡问题。

3、 BFC 会阻止外边距折叠

问题案例:margin塌陷问题:在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象。可以用overflow:hidden产生bfc来解决。

来源:https://blog.csdn.net/riddle1981/article/details/52126522

BFC 块级元素格式化上下文的更多相关文章

  1. CSS2系列:BFC(块级格式化上下文)IFC(行级格式化上下文)

    BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...

  2. BFC块级格式化上下文简述

    做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...

  3. BFC块级格式化上下文

    BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...

  4. BFC——块级格式化上下文

    BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...

  5. BFC(块级格式化上下文)

    转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details ...

  6. 从块级元素和行内元素的分析到bfc的布局理解

    接口和属性介绍 播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说 ...

  7. 理解CSS中的BFC(块级可视化上下文)[译]

    开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元 ...

  8. BFC块级格式上下文介绍

    块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒 ...

  9. BFC块级排版上下文

    1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position ...

随机推荐

  1. pyextend库-merge可迭代对象合并函数

    pyextend - python extend lib merge (iterable1, *args) 参数:  iterable1: 实现 __iter__的可迭代对象, 如 str, tupl ...

  2. Yii2 UploadedFile上传文件

    通过 UploadFile::getInstance($model, $attribute); UploadFile::getInstances($model, $attribute); Upload ...

  3. Alpha发布—文案+美工展示

    目录 团队简介 项目进展 组内分工 队员总结 后期计划 一.团队简介 二.项目进展 从选题发布到今天的Alpha发布,我们团队经历了许许多多的磨难.我们最终设计了如下的功能:首页.班级.个人.更多.打 ...

  4. Rsyslog的三种传输协议简要介绍

    rsyslog的三种传输协议 rsyslog 可以理解为多线程增强版的syslog. rsyslog提供了三种远程传输协议,分别是: 1. UDP 传输协议 基于传统UDP协议进行远程日志传输,也是传 ...

  5. linux 虚拟网络模型介绍

    第一种隔离模型          每一个虚拟机实例的网卡都有两个接口,一端接在虚拟机内部,一端接在宿主机内部,如上图所示eth0就是接在虚拟机内部的,而vnet0就是接在宿主机内部的,只要再创建一个虚 ...

  6. Struts2(六)

    以下内容是基于导入struts2-2.3.32.jar包来讲的 1.OGNL OGNL是Object-Graph Navigation Language的缩写,全称为对象图导航语言,是一种功能强大的表 ...

  7. 【第二周】【作业五】Scrum 每日站会

    1.首先来看一下什么是Scrum: Scrum是一种敏捷软件开发的方法学,用于迭代式增量软件开发过程.Scrum在英语是橄榄球运动中争球的意思. 虽然Scrum是为管理软件开发项目而开发的,它同样可以 ...

  8. The goal you specified requires a project to execute but there is no POM in this directory

    [INFO] Scanning for projects... [INFO] ------------------------------------------------------------- ...

  9. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  10. python while 学习

    while True: reply = input('please input:') if reply == 'stop': break else: print (reply.upper())