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. Ubuntu 18.04系统下arm-linux-gcc交叉编译器安装

    Ubuntu 18.04系统: arm-linux-gcc 4.4.3版本. 安装arm-linux-gcc将压缩包arm-linux-gcc.tar.gz解压到arm-linux-gcc文件夹tar ...

  2. InsetDrawable

    表示把一个Drawable嵌入到另外一个Drawable的内部,并且在内部留一些间距, 类似与Drawable的padding属性,但padding表示的是Drawable的内容与Drawable本身 ...

  3. SpringBoot： 16.整合junit单元测试（转）

    1.创建maven项目,修改pom.xml文件 <!--springboot项目依赖的父项目--> <parent> <groupId>org.springfram ...

  4. 鸟哥私房菜基础篇：程序管理与 SELinux 初探习题

    猫宁!!! 参考:http://cn.linux.vbird.org/linux_basic/0440processcontrol.php 1-简单说明什么是程序 (program) 而什么是程序 ( ...

  5. IDEA使用mybatis generator自动生成代码

    主要就三步: 1.pom 文件中引入jar包并配置 build 属性 <dependencies> <!-- 自动生产mapper Begin! --> <depende ...

  6. 远程桌面teamviewer

    1.同一局域网 windows:远程桌面 2.需穿过局域网 teamviewer (1)使用 http://jingyan.baidu.com/article/ff4116259af07d12e482 ...

  7. layer简单使用

    官方:https://www.layui.com/doc/modules/layer.html 源码:https://github.com/xiaostudy/web_sample 效果 目录结构 代 ...

  8. [Cometoj#4 C]方块切割_质因数分解_贪心

    方块切割 题目链接:https://cometoj.com/contest/39/problem/C?problem_id=1583 数据范围:略. 题解: 首先,如果我们知道了多少道在行上,多少刀在 ...

  9. AndroidStudio下载安装教程(图文教程)

    场景 Android Studio 中文社区: http://www.android-studio.org/ 下载安装包,这里选择64位Windows 等待下载完成. 注: 博客: https://b ...

  10. ajax提交 的编码小结

    今天用ajax的post方法提交数据给webservice,由于有email的缘故发现,注册方法调用总是报错,打开报文一看提交的 发现@符号被变成了%40 , abc@126.com 即abc%401 ...