何为BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC规则

  1. 内部的Box会在垂直方向，一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时，浮动元素也参与计算

BFC应用

  • 清除浮动
  • 防止 margin 重叠
  • 多栏布局的一种方式

CSS中BFC规则的更多相关文章

  1. 1:CSS中一些@规则的用法小结 2: @media用法详解

    第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下     at-rule ...

  2. 总结下对我对于CSS中BFC的认知

    首先第一个,什么是BFC? BFC的全称叫Block  Formatting  Context   (块级格式化上下文)BFC是css中隐含属性,开启BFC后元素会变成一个独立的布局环. 简单来说,它 ...

  3. 理解CSS中BFC

    BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系 属于 常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-block ...

  4. css中bfc和ifc

    bfc定义:块级格式化上下文,他是一个独立的渲染区域,他规定了这个内部如何布局,并且与这个区域的外部毫不相干.BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置.Box垂直方向的距离由mar ...

  5. html/css中BFC的开启、关闭、作用

    什么是BFC BFC是什么并不重要.重要的是开启它干嘛?以及如何开启它 根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context(块级 格式化 环境)简称BF ...

  6. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  7. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  8. CSS中的BFC

    CSS当中BFC介绍 在前端当中,我们都知道标准文档流,我们在开发的时候,经常会碰到block和inline.而下文要说到的BFC就是对块级盒子的格式化.当然block级别的盒子是BFC,那么inli ...

  9. CSS中的IFC和BFC入门

    CSS中的IFC和BFC入门   提到CSS,首先会想到的就是盒模型,如果对于盒模型不是很理解的,看这里.这是一个基础的系列,看了盒模型还可以看看box-sizing,好了不多说了,下面介绍今天的重点 ...

随机推荐

  1. F12谷歌开发者工具preserve log

    谷歌开发者工具里面这个preserve log :保留请求日志,跳转页面的时候勾选上,可以看到跳转前的请求,也可适用于chrome开发者工具抓包的问题

  2. linux-ntp-10

    Unix/linux类:ntp.aliyun.com,ntp1-7.aliyun.com windows类: time.pool.aliyun.com s1a.time.edu.cn 北京邮电大学 s ...

  3. [NOIP2017]注意点

    1.数据大却没开long long 导致的gg.2.文件读入时stdin打成stdout...3.桶维护数值,有负值要平移,且数值最好稍大(否则可能RE).4.很智障地打错变量.5.DP或其他涉及到转 ...

  4. 在Sublime Text 3中配置Python3的开发环境/Build System

    本文来源:https://www.cnblogs.com/zhangqinwei/p/6886600.html Sublime Text作为一款支持多种编程语言的文本编辑神器,深受广大开发者的喜爱.通 ...

  5. django操作cookie和session

    一.cookie:保存在客户端浏览器上的键值对 Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会 ...

  6. Python黑科技：在家远程遥控公司电脑，python+微信一键连接！

    有时候需要远程家里的台式机使用,因为我平时都是用 MAC 多,但是远程唤醒只能针对局域网,比较麻烦,于是我想用微信实现远程唤醒机器. 准备工作 本程序主要是实现远程管理 Windows10操作系统的开 ...

  7. Integer类源码浅析

    1.首先Integer提供了两类工具类,包括把一个int类型转成二进等, 其实执行转换算法只有一个方法: public static String toString(int i, int radix) ...

  8. RestFul的无状态规则详解

    无状态原则 Statelessness:无状态原则是RESTful架构设计中一个非常重要的原则,无状态是相对于有状态而言的.在理解什么是无状态的交互请求之前,首先我们需要了解什么是有状态,并对两者进行 ...

  9. sqlite的系统表sqlite_master

      SQLite数据库中一个特殊的名叫 SQLITE_MASTER 上执行一个SELECT查询以获得所有表的索引.每一个 SQLite 数据库都有一个叫 SQLITE_MASTER 的表, 它定义数据 ...

  10. tp3.2 页面Windows正常 linux异常，页面找不到

    这个问题主要是tp3.2 在读取控制器里的方法时,会把方法自动转为小写, 然后去对应view成找html文件,自然找不到. class textController extends ComContro ...