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块级格式上下文

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

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

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

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

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

  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. BFC（块级格式上下文）

    BFC的生成 满足下列css声明之一的元素便会生成BFC 根元素 float的值不为none overflow的值不为visible display的值为inline-block.table-cell ...

随机推荐

  1. Linux查看某进程的线程

    首先得知道你要查的进程的PID: 比如我要查看看我unimrcpserver的线程 第二种方法:top top命令可以实时显示各线程情况.就相当于windows的资源管理器.

  2. maven参数详解

    setting.xml主要用于配置maven的运行环境等一系列通用的属性,是全局级别的配置文件:而pom.xml主要描述了项目的maven坐标,依赖关系,开发者需要遵循的规则,缺陷管理系统,组织和li ...

  3. left semi join VS left join

    left semi join VS left join思考: 建表 CREATE TABLE `kv1`( `k1` string, `v1` string) ROW FORMAT SERDE 'or ...

  4. Mac SIP系统完整性保护如何关闭

    方法/步骤1: 打开Mac终端输入命令:csrutil status 它会显示关闭的话是disable,开启的话是enabled.默认情况下是开启的所以要关闭. 方法/步骤2: 点击桌面的apple ...

  5. [转]CSS自动换行后缩进

    原文 https://blog.csdn.net/u011974797/article/details/71439794 例如: ●这是第一行太长了超出 显示到第二行 想实现的效果: ●这是第一行太长 ...

  6. 【leetcode】Monotone Increasing Digits

    Given a non-negative integer N, find the largest number that is less than or equal to N with monoton ...

  7. TypeScript作为前端开发你必须学习的技能二）

    TypeScript 变量声明 变量是一种使用方便的占位符,用于引用计算机内存地址.我们可以把变量看做存储数据的容器. TypeScript 变量的命名规则:和javascript一样.除了下划线 _ ...

  8. 浏览器主页在不知情的情况下设置为duba.com和newduba.cn

    原来是安装了“驱动精灵”. 真是个垃圾! 不通知用户的情况下,自动给锁定主页. 真TMD恶心 离倒闭不远了,现在只能通过这种方式来获取流量.

  9. web上传文件夹

    文件夹数据库处理逻辑 publicclass DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); ...

  10. luogu 4725 【模板】多项式对数函数（多项式 ln）

    $G(x)=ln(A(x))$ $G'(x)=ln'(A(x))A'(x)=\frac{A'(x)}{A(x)}$     由于求导和积分是互逆的,所以对 $G$ 求积分,即 $G(x)=\int\f ...