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. /proc/sys/net/ipv4/ip_conntrack_max

    Things to know (best practices and “issues”) READ IT !!! — uWSGI 2.0 documentationhttps://uwsgi-docs ...

  2. OpenCV学习笔记(2)——如何用OpenCV处理视频

    如何用OpenCV处理视频 读取视频文件,显示视频,保存视频文件 从摄像头获取并显示视频 1.用摄像头捕获视频 为了获取视频,需要创建一个VideoCapature对象.其参数可以是设备的索引号,也可 ...

  3. ShapeDrawable

    形状的Drawable咯,定义基本的几何图形,如(矩形,圆形,线条等),根元素是<shape../> 节点比较多,相关的节点如下: ① <shape>: ~ visible:设 ...

  4. Oracle SQL的优化

    SQL的优化应该从5个方面进行调整:1.去掉不必要的大型表的全表扫描2.缓存小型表的全表扫描3.检验优化索引的使用4.检验优化的连接技术5.尽可能减少执行计划的Cost SQL语句:是对数据库(数据) ...

  5. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_23-页面预览-页面预览开发

    1.用户进入cms前端,点击“页面预览”在浏览器请求cms页面预览链接. 2.cms根据页面id查询DataUrl并远程请求DataUrl获取数据模型. 3.cms根据页面id查询页面模板内容 4.c ...

  6. Qt编写自定义控件21-圆弧仪表盘

    一.前言 圆弧仪表盘在整个自定义控件大全中也稍微遇到了技术难点,比如背景透明,如果采用以前画圆形画扇形的方式绘制,肯定很难形成背景透明,需要用到切割,最后换了一种绘制方法,采用绘制圆弧的方式,即使用d ...

  7. linux基础之文件类型与权限

    在终端以root身份登入linux之后,下达 ls -al 会获得如下结果

  8. CTF基础知识 && AWD红蓝对抗

    AWD 备份源码,修改账户密码,查看是否有预留后门然后删掉 修改mysql密码 格式:mysqladmin -u用户名 -p旧密码 password 新密码 例子:mysqladmin -uroot ...

  9. 数据库基础知识介绍（MySQL）

    一.什么是数据库 1.数据库概念:数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API接口用于创建,访问,管理,搜索和复制所保存的数据. 2.RD ...

  10. 【VS开发】VC下加载JPG/GIF/PNG图片的两种方法

    1.用API OleLoadPicture来加载JPG.GIF格式的图片(注:不支持PNG格式,另外GIF只能加载第一帧,且不支持透明) OleLoadPicture 函数实际上创建了一个IPictu ...