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. Qt编写自定义控件23-广告轮播控件

    一.前言 广告轮播这个控件做的比较早,是很早以前定制一个电信客户端时候用到的,该客户端需要在首页展示轮播预先设定好的图片,图片的路径可以自由设定,然后轮播的间隔速度可以自由控制,同时该控件还需要提供两 ...

  2. java+断点续传

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  3. php 转化整型需要注意的地方

    public function tt(){ $num = '19.90'; echo $num; echo '<br/>--------------<br/>'; echo 1 ...

  4. DrawRect 内存问题

    DrawRect实现画板将会大量产生内存问题. 具体请看:http://bihongbo.com/2016/01/03/memoryGhostdrawRect/ 可能的原因有两个: 一是在手指绘制的过 ...

  5. Spring Aop(十三)——ProxyFactoryBean创建代理对象

    转发地址:https://www.iteye.com/blog/elim-2398673 ProxyFactoryBean创建代理对象 ProxyFactoryBean实现了Spring的Factor ...

  6. Response.setContentType()参数说明

    response.setContentType()的参数说明 <meta http-equiv="Content-Type" content="text/html; ...

  7. C++中使用OPENCV对深度学习的特征图进行可视化

    //需要先在运行目录下创建文件夹opencv_layers #include <iostream> #include <unistd.h> #include <openc ...

  8. Unity-3D-H2

    1.简答题[建议做解释 游戏对象(GameObjects) 和 资源(Assets)的区别与联系. 游戏对象:直接出现在游戏的场景中,是资源整合的具体表现,对象通过层次结构来组织,通过整体-部分的关系 ...

  9. 澎湃新闻速览版UWP 隐私策略

    ThePaper UWP 此为 澎湃新闻速览版 的隐私策略,本隐私策略内容会不定期更新,以最新内容为主. 若您已经阅读并了解以下内容后,并继续使用该软件,即表示您已同意该协议. 内容: 这是澎湃新闻的 ...

  10. Linux下文件搜索、查找、查看命令

    Linux下文件搜索.查找.查看命令 1.最强大的搜索命令:find 查找各种文件的命令 2.在文件资料中查找文件:locate 3.搜索命令所在的目录及别名信息:which 4.搜索命令所在的目录及 ...