BFC块级格式上下文，独立的一个渲染区域

1、同一个BFC的两个相邻盒子间的margin会重叠（垂直方向）；

2、BFC内部的盒子在垂直方向上会一个接一个的放置；

3、每个子元素的左外边距与包含块的左边界相接触；

4、计算BFC的高度时，浮动子元素也参与计算；

5、BFC内部的子元素不会受到外面元素的影响；

6、BFC的区域不会与float的元素区域重叠；

触发BFC条件：

float：不为none；

overflow的值不为visible；

display：inline－block，table－cell，table－caption；

position：不为relative 和 static

哪些元素会产生BFC

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

如果一个浮动元素后面紧跟一个非浮动的元素，那么就会有一个覆盖的对象，这时可对后面非浮动元素设置overflow：hidden触发BFC，或者设置padding－left：浮动元素的宽度

BFC块级格式上下文的更多相关文章

  1. BFC块级格式上下文介绍

    块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒 ...

  2. BFC——块级格式上下文

    BFC中的B指的是block,对应的还有IFC,I指的是inline.对于BFC的理解可以参考层叠上下文.页面中,盒子的排布规则,是生效在对应的BFC中.两个BFC中的布局互不影响.页面的本身的根本身 ...

  3. BFC块级格式

    BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...

  4. 什么是BFC（块级格式上下文）？

    ㈠什么是BFC? BFC 全称为 块格式化上下文 (Block Formatting Context) . 定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, ta ...

  5. 理解 CSS 布局和块级格式上下文

    前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding C ...

  6. CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)

    BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...

  7. BFC块级格式化上下文

    BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...

  8. BFC——块级格式化上下文

    BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...

  9. CSS--理解块级格式上下文（BFC）

    1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, ...

随机推荐

  1. 通过hue提交oozie定时任务

    Oozie是什么? Oozie是一种Java Web应用程序,它运行在Java servlet容器——即Tomcat——中,并使用数据库来存储以下内容: 工作流定义 当前运行的工作流实例,包括实例的状 ...

  2. (25)IO流之转换流InputStreamReader和OutputStreamWriter

    InputStreamReader:字节到字符的桥梁. OutputStreamWriter:字符到字节的桥梁. 它们有转换作用,而本身又是字符流.所以在构造的时候,需要传入字节流对象进来. 构造函数 ...

  3. iOS开发之UIView的常见属性

    1.所有控件都继承自UIView,UIView的常见属性如下: @property(nonatomic,readonly) UIView *superview;获得自己的父控件对象 @property ...

  4. Linux下文件误删除恢复案例

    说明:将/etc/profile文件删除,然后恢复 在linux中为什么讲文件删除还能恢复呢? 详见:文件删除原理 http://blog.csdn.net/grantlee1988/article/ ...

  5. python应用部署--flask

    首先必须吐槽一下,python应用部署简直就是有毒...太麻烦了.关键还不能成功部署. 网上很多教程都是说要用nginx和uwsgi.来来回回试了无数次都不行.于是乎,在某一个瞬间,灵感以来,发现了一 ...

  6. 什么东西那么吸引别人的眼球！！ -----------------------------------for循环

    认识for循环结构 在编码过程中,把一些重复执行代码采用循环结构进行描述,可以大大减化编码工作, 使得代码更加简洁.宜都... 1.     为什么要用for? 比如: 老师叫小明统计全班人的编号,小 ...

  7. Python爬虫 Cookie的使用

    Cookie,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密) 比如说有些网站需要登录后才能访问某个页面,在登录之前,你想抓取某个页面内容是不允许的.那么 ...

  8. 24(java_io from keyboard)

    public class ReadFromKB{ public static void main(String args[]) { try { byte bArray[]=new byte[128]; ...

  9. sublime text 3 打造舒适黑色主题

    效果: 这里我使用了两个主题插件组合成的 Spacegray Afterglow Ctrl+Shift+P -> Package Control:Install Packages 分别输入Spa ...

  10. jQuery扩展函数设置所有对象只读

    jQuery(function ($) {             $.fn.disable = function () {                 return this.each(func ...