简单介绍BFC

　BFC

　　就是块级格式化上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。

　创建 BFC 的方式有：

　　1.html的根元素

　　2.float浮动

　　3.绝对定位

　　4.overflow不为 visible

　　5.display为表格布局或弹性布局

　　6.contain值为layout

　　7.content或 strict的元素等。

　

　BFC的作用：

　　1.清除浮动

　　2.解决margin塌陷问题

　

　BFC的特点：

　　1.内部box会一个一个的垂直放置

　　2.形成了BFC的区域不会与float box重叠，BFC在页面是个独立的容器，里外元素互不影响

　　3.BFC在计算高度时会把浮动元素计算进去

　　4.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）

BFC的作用及其应用的更多相关文章

  1. 【转】浅析BFC及其作用

    1. 什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 中文译为块级格式化上下文.是 ...

  2. 浅析BFC及其作用

    本文链接:https://blog.csdn.net/riddle1981/article/details/52126522

  3. BFC的概念及作用

    在了解什么是BFC之前,首先得明白什么是Box , Formatting Context (一个决定如何渲染文档的容器)的概念 Box: CSS布局的基本单位 Box是 CSS 布局的对象和基本单位, ...

  4. 浅析BFC布局的概念以及作用

    BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与 ...

  5. BFC的概念、BFC触发方式、BFC作用介绍

    一.BFC的概念 GFC——block fomatting context(中文译为块级格式化上下文) 二. 如何触发BFC 1. 设置 float 除 none 以外的值(left.right) 2 ...

  6. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  7. 前端精选文摘：BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  8. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  9. BFC,定位，浮动，7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

随机推荐

  1. manjaro xfce4 使用super+D快捷键显示桌面（以及使用super+方向键调整窗口）设置无效

    xfce4 有两个地方设置快捷键:Keyboard -> application shortcuts 和 window manager -> keyboard. window manage ...

  2. 30行左右代码实现一个类似httprunner的接口框架

    框架的最终归宿往往是领域语言+模板解析. 首先先约定一种所要执行操作的表述格式.然后通过模板解析将描述语言转化为代码进行执行.例如,我们可以使用以下yaml文件描述多个步骤并且需要关联的接口: api ...

  3. elasticsearch update方法报错： Too many dynamic script compilations within, max: [75/5m]

    PUT _cluster/settings    {        "transient" : {            "script.max_compilations ...

  4. meshing-风火轮

    原视频下载地址: https://pan.baidu.com/s/1pKVPall 密码: ubwr ​

  5. Qt学习大全

    这边文章的目的是把自己之前写的关于Qt的文章整理归纳成一个Qt学习的专栏,会提供之前文章的导航,同时也会留一些坑待自己日后填. 1.Qt 元对象系统 2.Qt的信号和槽 3.Qt的插件开发 4.Qml ...

  6. docker install and minikube install

    1.选择国内的云服务商,这里选择阿里云为例 curl -sSL http://acs-public-mirror.oss-cn-hangzhou.aliyuncs.com/docker-engine/ ...

  7. Hibernate 关系配置

    表之间关系 1. 一对多 一个部门有多个员工,一个员工只能属于某一个部门 一个班级有多个学生,一个学生只能属于一个班级 2. 多对多 一个老师教多个学生,一个学生可以被多个老师教 一个学生可以先择多门 ...

  8. BAT文件运行时不显示命令窗口的方法

    可以编一个VBS文件调用BAT文件,使运行BAT文件时不显示命令窗口. 新建一个记事本文件,保存为abc.vbs,在文件中加入如下代码: Set shell = Wscript.createobjec ...

  9. [IMX6DL] CPU频率调节模式以及降频方法

    本文转自http://blog.csdn.net/kris_fei/article/details/51822435 Kernel branch: 3.0.35 CPU的频率调节模式:1. Perfo ...

  10. <JavaScript>使用onmousemove事件实现移动（拖拽）div 出现的关于offsetX的问题

    出现的问题如下图所示(截屏看不出来看log) 再移动鼠标的过程中会不断的出现异常值导致拖动的div不断切换位置,回到左上角. 我以为是冒泡机制导致的所以添加了下面一段阻止冒泡,随便也阻止了默认事件,但 ...