今天先来说关于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. DevOps - CI - Sonar

    Sonar 官方信息 https://www.sonarqube.org/ https://www.sonarqube.org/downloads/ https://docs.sonarqube.or ...

  2. 从官网下载指定版本的JDK

    从官网下载指定版本的JDK 一.百度搜索jdk,进入最新版Downloads界面 百度搜索jdk,或者jdk下载,点击进入jdk官网最新版本下载界面,可以看到当前最新版本为jdk12 二.找到JDK历 ...

  3. sql必知必会

    1.根据条件查询数据库中数据,并返回数据条数 去掉count就会返回数据库中符合条件的所有数据 SELECT COUNT(*) FROM sentiment_info WHERE sentiment_ ...

  4. oracle 异常关闭操作 导致数据库无法正常关闭 也无法启动

    场景描述: 在关闭数据库的时候,命令没有打全,导致数据库没有正常关闭 解决办法: 重新建立个连接,然后切换到oracle用户 执行强制关闭数据库: OK 问题解决,不过生产环境 还是不推荐 shutd ...

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

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

  6. 为什么要设置Java环境变量（windows）

    在学习JAVA的过程中,涉及到多个环境变量(environment variable)的概念,如PATH.正确地配置这些环境变量,是能够顺利学习.开发的前提.而经常出现的问题是:有的学习者能够按照提示 ...

  7. JavaScript -- Navigator

    -----040-Navigator.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...

  8. java命令行指定log4j2

    java -Dlog4j.configurationFile=directory/file.xml

  9. shell脚本案例分享 - 业务系统日志自定义保留或删除需求

    需求说明:  线上某些业务系统的日志不定期产生, 有的每天产生, 有的好几天才产生, 因为系统只有在用的时候才产生日志,日志文件均存放在以当天日期命名的目录下. 当日志目录越来越多时就需要处理, 由此 ...

  10. redis cluster集群管理工具redis-trib.rb命令小结-运维笔记

    redis-trib.rb是redis官方推出的管理redis集群的工具,集成在redis的源码src目录下,是基于redis提供的集群命令封装成简单.便捷.实用的操作工具.redis-trib.rb ...