今天先来说关于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. python 多版本管理pyenv和virtualenv虚拟开发环境

    pyenv是管理多个python版本的工具. 1.pyenv的安装 git clone https://github.com/yyuu/pyenv.git ~/.pyenv 2.将PYENV_ROOT ...

  2. Liferay-Activiti 功能介绍 （新版Liferay7基本特性）

    一句话简介 Liferay是世界领先的开源企业门户(也可作为综合门户),是最强大(没有之一)的JAVA开源门户,在Gartner和Forrester和评价非常高,近几年已经超越了微软门户Sharepo ...

  3. win10关机之后自动重启（系统更新之后出现这个问题）

    最近更新了一把win10之后出现无法关机,关机之后直接又开机,无限循环状态.最近几天没空处理一直是强关笔记本下班的. 今天打了一把命令: shutdown /s /t 0 发现关机正常,本来打算整个脚 ...

  4. 8 Ways to Become a Better Coder

    It’s time to get serious about improving your programming skills. Let’s do it! That’s an easy career ...

  5. c3p0配置文件

    配置文件 名称必须为c3p0-config.xml,否则找不到: 标签名称 <c3p0-config> <default-config > 具体配置内容 </defaul ...

  6. vue修改对象属性值视图上没有更新

    data(){ return { obj:{ name:' ' } } } 方法一: this.$set(this.obj, 'name', '新的值'); 方法二; Vue.set(vm.obj, ...

  7. MVC源码分析 - View续之Razor

    过完年, 大家都忙碌起来了, 我也不例外. 不过并不是忙碌于去面试找工作, 而是忙碌于现在手上的工作. 闲话不多说了, 进入今天的主题. 一.Index页面在哪里 很奇怪, 在目录bin下面的dll文 ...

  8. jQuery实用Demo

    1.点击 隐藏/显示 元素 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. mongo学习使用记录1

    1 mongo的安装 1.添加MongoDB安装源 1.添加MongoDB安装源vim /etc/yum.repos.d/mongodb-enterprise.repo 将下列配置项写入文件 [mon ...

  10. mysqlbinlog命令介绍及实战

    MySQL的binlog日志的作用 - 1:用来记录mysql内部增删改查等对MySQL数据有更新内容的记录.像show和select一般不会记录 - 2:mysqlbinlog --base64-o ...