今天先来说关于BFC的一些基础知识

　　BFC是块状格式化上下文，它是一个独立的渲染区域，规定了内部如何布局，并且这个布局和外部毫不相干

　　触发BFC的方法

　　1.根元素（即html）

　　2.float属性不为none

　　3.position属性为absoulute，fixed

　　4.display为inline-block,table-cell,table-caption,flex,inline-flex

　　5.overflow不为visiable时

BFC(块状格式化上下文)的更多相关文章

  1. CSS BFC（格式化上下文）深入理解

    什么是BFC 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是 ...

  2. 前端面试题-BFC(块格式化上下文)

    一.BFC 的概念 1.规范解释 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元 ...

  3. BFC块级格式化上下文简述

    做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...

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

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

  5. BFC(Box,Formatting,Context) —— 块级格式化上下文

    Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...

  6. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  7. 详解块级格式化上下文（BFC）

    相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...

  8. BFC块级格式化上下文

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

  9. 基础总结（02）--BFC（块级格式化上下文）

    BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元 ...

随机推荐

  1. es6 学习小记 扩展运算符 三个点（...）

    参考: es6 扩展运算符 三个点(...) 经常回顾,方能真正掌握. 一.含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. ...

  2. Consul集群搭建

    一.集群搭建 准备三台机器 需要开启的端口,8300, 8301, 8500, 8600 机器1: 172.16.106.201 ./consul agent -server -bootstrap-e ...

  3. JFrame、JPanel 、Layout开发的简单例子

    写了Java这么久,居然发现想手写一个带网格袋布局的JFrame,还不记得怎么写,写了这么多代码真不敢说记得所有细节. 幸好,只要记清楚概念就能快速开发.首先,明确一下3种容器类的差别和用途: No. ...

  4. postgresql-pg_prewarm数据预加载。

    pg_prewarm数据预加载. http://francs3.blog.163.com/blog/static/405767272014419114519709/   https://www.kan ...

  5. [Leetcode]120.三角形路径最小和

    ---恢复内容开始--- 题目的链接 简单的动态规划题,使用了二维dp数组就能很好的表示. 由于有边界的问题,所以这个dp数组为 dp[n+1][n+1]. dp[i][j]意思是终点为(i-1,j- ...

  6. vue教程1-03 v-for循环

    vue教程1-03 v-for循环 v-for循环: v-for="name in arr" {{value}} {{$index}} v-for="name in js ...

  7. 课程一(Neural Networks and Deep Learning)，第四周（Deep Neural Networks）—— 0.学习目标

    Understand the key computations underlying deep learning, use them to build and train deep neural ne ...

  8. Spark集群之Spark history server额外配置

     Note: driver在SparkContext使用stop()方法后才将完整的信息提交到指定的目录,如果不使用stop()方法,即使在指定目录中产生该应用程序的目录,history server ...

  9. 全网最详细的Windows里下载与安装Sublime Text *（图文详解）

    不多说,直接上干货! 前言 这是代码编程软件,可以性感编程自己代码,有着非常丰富的插件,界面整洁清爽.第一次使用可能不习惯,当你使用一段时间之后,你就会爱上它. 下载与安装 1.下载:目前官方的正式版 ...

  10. 代码高亮插件——wangHightLighter.js——demo演示

    wangHighLighter.js demo 语言:   主题: 转换   说明: wangHightLighter.js是一个可以将代码高亮显示的javascript小插件,支持常用的20多语言. ...