今天先来说关于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. WebSocket集成XMPP网页即时通讯1：Java Web Project服务端/客户端Jetty9开发初探

    Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事, ...

  2. 阿里云centos 开启ipv6

    参考网址 https://blog.chenjia.me/articles/160301-134110.html?spm=5176.bbsr285557.0.0.g1Oemn 阿里云限制了ipv6的功 ...

  3. 【xsy1281】 珠串 打表+乱搞or数位dp

    题目大意:你要找出一个有$k$个的本质不同的$n$位二进制数的集合,使得集合中最大的数最小,请输出这个数 本质不同定义:对于一个数$k$,$rev(k)$,$~k$,$rev(~k)$与$k$本质相同 ...

  4. (转)OpenResty(nginx+lua) 开发入门

    原文:https://blog.csdn.net/enweitech/article/details/78519398 OpenResty 官网:http://openresty.org/  Open ...

  5. Configuration problem: Failed to import bean definitions from relative location

    问题现象: 最近开始做新需求,然后在Tomcat上部署项目时,出现了如下报错: [12-05 09:54:27,161 ERROR] ContextLoader.java:351 - Context ...

  6. Maven install [WARNING] The artifact aspectj:aspectjrt:jar:1.5.4 has been relocated to org.aspectj:aspectjrt:jar:1.5.4

    一.背景 最近在给项目打包的时候,在控制台老是出现一行警告:[WARNING] The artifact aspectj:aspectjrt:jar:1.5.4 has been relocated ...

  7. tensorflow 在同一个GPU同时加载多张相同的图

    saver = self.tf_instance.train.Saver() self.sess = self.tf_instance.Session(config=sess_config, grap ...

  8. Java你不知道的那些事儿—Java隐藏特性（上）

    每种语言都很强大,不管你是像我一样的初学者还是有过N年项目经验的大神,总会有你不知道的东西.就其语言本身而言,比如Java,也许你用Java开发了好几年,对其可以说是烂熟于心,但你能保证Java所有的 ...

  9. 装饰者模式——Java设计模式

    装饰模式 1.概念 动态地为对象附加上额外的职责 其目的是包装一个对象,从而可以在运行时动态添加新的职责.每个装饰器都可以包装另一个装饰器,这样理论上来说可以对目标对象进行无限次的装饰. 2.装饰器类 ...

  10. Java获取微信小程序二维码

    tip:通过该接口,仅能生成已发布的小程序的二维码. tip:可以在开发者工具预览时生成开发版的带参二维码. tip:接口A加上接口C,总共生成的码数量限制为100,000,请谨慎调用. tip: P ...