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. 回归regression

    X-Y存在某种映射关系,回归:确定出关系模型.

  2. mongodb download

    https://www.mongodb.org/dl/win32/x86_64-2008plus-ssl

  3. 【ARTS】01_29_左耳听风-201900527~201900602

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  4. SIFT学习笔记之一 下载和调用

     下面给出了多个参考地址,挑个能用的吧: vs2010+Rob Hess SIFT: http://blog.csdn.net/lanbing510/article/details/8507341 R ...

  5. 教程2：如何找到内存泄漏dotmemory

    在本教程中,我们将看到如何使用dotmemory定位和固定在你的应用程序的内存泄漏.但在开始之前,让我们在一个内存泄漏是一致的. 内存泄漏是什么? 根据维基百科,内存泄漏是由于不正确的内存管理时,”一 ...

  6. codevs 1048/洛谷 1880:石子归并

    题目描述 Description 有n堆石子排成一列,每堆石子有一个重量w[i], 每次合并可以合并相邻的两堆石子,一次合并的代价为两堆石子的重量和w[i]+w[i+1].问安排怎样的合并顺序,能够使 ...

  7. [Agc029E]Wandering TKHS_树形dp_树上差分

    Wandering TKHS 题目链接:https://atcoder.jp/contests/agc029/tasks/agc029_e 数据范围:略. 题解: 好神啊 Orz司队 https:// ...

  8. Docker 安装 Python

    查找Docker Hub上的python镜像 docker search python 拉取官方的镜像,标签为3.5 docker pull python:3.5 使用python镜像 创建目录pyt ...

  9. 【转】mysql分库分表,数据库分库分表思路

    原文:https://www.cnblogs.com/butterfly100/p/9034281.html 同类参考:[转]数据库的分库分表基本思想 数据库分库分表思路   一. 数据切分 关系型数 ...

  10. linux 下tomcat出现 Native memory allocation (malloc) failed to allocate 1915224064 bytes for committing reserved memory问题

    ## There is insufficient memory for the Java Runtime Environment to continue.# Native memory allocat ...