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. HashMap 的实现原理（1.8）

    详见:https://blog.csdn.net/richard_jason/article/details/53887222 HashMap概述 1.初始容量默认为16 最大为2的30次方,负载因子 ...

  2. 基于SOA的图书商城系统分析

    1.1什么是SOA架构? SOA( Service Oriented Architecture)是一种面向服务的分布式架构,将每个实现特定功能的工程拆分为服务层和表现层.服务层负责处理业务逻辑,对外提 ...

  3. phpstudy使用PHP+nginx配置Laravel

    一.需要注意把vhosts.conf文件内root项目路径的\换成/例如 root "D:/laravelApp/test/public"; 二.若文件根目录下没有 .env1.. ...

  4. Codeforces 984 扫雷check 欧几里得b进制分数有限小数判定 f函数最大连续子段

    A /* Huyyt */ #include <bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define mkp(a,b) ...

  5. JAVA并发编程的艺术 JMM内存模型

    锁的升级和对比 java1.6为了减少获得锁和释放锁带来的性能消耗,引入了"偏向锁"和"轻量级锁". 偏向锁 偏向锁为了解决大部分情况下只有一个线程持有锁的情况 ...

  6. DevExpress WinForms v19.1新版亮点：Spreadsheet/Sunburst控件功能增强

    行业领先的.NET界面控件DevExpress v19.1终于正式发布,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WinForms v19.1中新增的一些控 ...

  7. c++string int转化简单写法

    #include<iostream> #include<string> #include<sstream> //定义了stringstream类 using nam ...

  8. Git远程新建分支之后，本地看不到最新分支

    git remote update origin –prune 注意 双- csdn 对于 两个 - 看起来像一个

  9. leaflet 地图容器大小改变时,地图自适应新容器

    window.onload = function () { changeDivHeight(); } //当浏览器窗口大小改变时,设置显示内容的高度 window.onresize = functio ...

  10. k8-s存储

    原文 https://mp.weixin.qq.com/s/6yg_bt5mYKWdXS0CidY6Rg 从用户角度看,存储就是一块盘或者一个目录,用户不关心盘或者目录如何实现,用户要求非常" ...