BFC(block formatting context):块级格式化上下文（实际就是一个隔离罩）

　　W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

　　渲染规则：

　　　　规则很重要，要记住。

　　　　规则1：在BFC中元素垂直方向上的margin会重叠。

　　　　规则2：BFC内相当于一个独立的世界，里面的元素无论怎么变化都不会影响外面。

　　　　规则3：BFC内元素不会与浮动元素发生重叠（这是BFC解决浮动的根本原因）。

　　　　规则4：计算高度时，浮动元素也会参与（也就是overflow:hidden能清浮动的原因）。

　　创建BFC:

　　　　

  • body 根元素(html)
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

　　　　

BFC渲染机制的更多相关文章

  1. float浮动-清浮动BFC渲染机制

    float浮动,用于横向布局. 起初的横向布局都用display:inline-block,但是这会导致两个元素之间有空隙,而这是由代码换行解析成空格的,解决元素间有空隙,空格:font-size:0 ...

  2. [转]浏览器渲染机制——一定要放在body底部的js引用

    转自:http://blog.csdn.net/u012251421/article/details/50536265 说明: 本文提到的浏览器均是指Chrome. “script标签“指的都是普通的 ...

  3. Android渲染机制和丢帧分析

    http://blog.csdn.net/bd_zengxinxin/article/details/52525781 自己编写App的时候,有时会感觉界面卡顿,尤其是自定义View的时候,大多数是因 ...

  4. webkit 渲染机制

    最近看了< webkit技术内幕 >,虽然并不能完全看懂,但是对浏览器的渲染机制也算是有了一个比较完整的认识. 我们从浏览器地址栏输入网址开始到web页面被完整的呈现在眼前,大概的经过了这 ...

  5. 理解WebKit和Chromium: Chromium WebView和Chrome浏览器渲染机制

    转载请注明原文地址:http://blog.csdn.net/milado_nju ## 数据对比 前面介绍过Chromium WebView的时候,说过有关ChromiumWebView同Chrom ...

  6. 2013 QCon北京演讲：跨终端的WebKit渲染机制

    转载请注明原文地址:http://blog.csdn.net/milado_nju 1. 该演讲主要介绍WebKit的渲染机制的内部工作原理和一些新的技术,特别是针对不断出现的多种终端所做的一些努力. ...

  7. JS学习笔记：（一）浏览器页面渲染机制

    浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里 ...

  8. Vue项目预渲染机制引入实践

    周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末 ...

  9. 转---JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制

    作者:德来 segmentfault.com/a/1190000004292479 如有好文章投稿,请点击 → 这里了解详情 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如: ...

随机推荐

  1. 《你不知道的JavaScript（上）》笔记——关于this

    this 指向函数的作用域是一种常见的误解,this 在任何情况下都不指向函数的词法作用域. 在 JavaScript 内部, 作用域确实和对象类似, 可见的标识符都是它的属性. 但是作用域" ...

  2. v-on绑定特性命名带小横杠 ‘-’与props属性中变量怎么对应

    特性命名问题: 矛盾点一:html的特性不区分大小写 矛盾点二:Vue中除了模板命名,其他命名不允许出现小横杠 ‘-’ 在js文件内,命名为驼峰式,camerCase,进入html文件,自动转换成短横 ...

  3. Jenkins 搭建企业实战案例 (发布与回滚)

    让我们的代码部署变得easy,不再难,Jenkins是一个可扩展的持续集成引擎,是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.Jenkins非常易于安装和配置,简单易用 ...

  4. MyISAM与InnoDB之间的区别

    区别: 1. InnoDB支持事务,MyISAM不支持,对于InnoDB每一条SQL语言都默认封装成事务,自动提交,这样会影响速度,所以最好把多条SQL语言放在begin和commit之间,组成一个事 ...

  5. golang的下载与安装

    golang的官网可能由于政策原因登陆不上. 所以可以到Go语言中文网下载:https://studygolang.com/dl 我下载的是go1.10.3.windows-amd64.msi安装包, ...

  6. Git常用命令速查表，新手必备版本控制

    Git 跟 SVN 一样,都是用于管理代码的版本控制工具.无论在项目中,我们负责哪一块,只要需要编写代码,就必须熟悉Git(依公司要求而定). 当然,用的越熟练,处理的项目越顺利,离出任CTO.迎娶白 ...

  7. 部署 --- Nginx

    Nginx介绍 简介: Nginx是由伊戈尔.塞索耶夫开发的,在04年10月开源的一款高性能HTTP和反向代理服务器. 因为它的稳定性好,功能丰富,有示例配置文件和较低的系统资源消耗而闻名 同时也是一 ...

  8. C\C++中的 struct 关键字详解

    struct关键字是用来定义一个新的类型,这个新类型里面可以包含各种其他类型,称为结构体. 1. 什么是结构体 结构体(struct)是一种自定义的数据类型,就是把一组需要在一起使用的数据元素组合成一 ...

  9. Linux上面mount 域控的目录 超时 然后提示 error的解决办法

    mount error(112): Host is down 故障解决 https://blog.csdn.net/lepton126/article/details/89447713 之前查到过 这 ...

  10. oracle授予权限

    CONNECT角色:    --是授予最终用户的典型权利,最基本的 CREATE    SESSION    --建立会话 RESOURCE角色:    --是授予开发人员的    CREATE    ...