什么是BFC:

块级格式化上下文

BFC的作用：

BFC其实就是规定了网页布局的规范
    1.BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素
    解释:BFC的基本改变,最大的BFC是HTML文件
    2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠
    解释:盒模型中的margin错误解析的bug margin-top/bottom之间会解析最大值
    3.BFC内部的盒子会在垂直方向，一个接一个的放置。
    解释:块级元素的特点
    4.盒子的左边与包含块的边框相接触才可以移动位置
    解释:margin-left/right(使用定位)
    5.BFC的区域不会与浮动盒子发生重叠
    解释:实现常见的后台布局(两栏布局:左侧固定右侧自适应)
    6.计算BFC的高度时，浮动元素也参与计算
    解释:高度塌陷里面可以解决bug
怎么样触发BFC：

1.根元素，即HTML元素

2.浮动元素：float值为left、right

3.overflow值不为 visible，为 auto、scroll、hidden

4.display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

5.position的值为absolute或fixed

什么是BFC，BFC的作用，以及怎么触发BFC的更多相关文章

  1. 盒模型 bug 与触发 bfc

     一.margin合并 css经典bug  两个块级元素 分别设置 margin-bottom 和 margin-top 并不能达到预期效果 <style> .up{ width: 200 ...

  2. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

  3. margin 塌陷bug 触发bfc

    1.bfc block format context 2.如何触发一个盒子的bfc position:absolute; display: inline-block float:left/right; ...

  4. BFC概念和作用，触发条件

    1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inlin ...

  5. 那什么时候会触发BFC呢？块级格式化上下文

    <html>根元素: float的值不为none: overflow的值为auto.scroll或hidden: display的值为table-cell.table-caption和in ...

  6. 【转】浅析BFC及其作用

    1. 什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 中文译为块级格式化上下文.是 ...

  7. 清除浮动clear/BFC

    浮动的清除有两种方式: 一.clear clear:both/left/right; 二.创建BFC (1)什么是BFC? BFC,块级格式化上下文,是一个独立的渲染区域,只有Block-level ...

  8. 学习BFC

    BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式化模型. 视觉 ...

  9. BFC 从了解到放弃

    最近工作中我突然产生了一个想法,就如我们人类面临的终极问题一般,我从哪里来?我到哪里去?在撸代码进行CSS布局的时候,我会去想,我为什么这么做?,为什么浮动的元素要用overflow?,为什么要用cl ...

  10. BFC与边距重叠详解

    1.什么是BFC? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位Box 是 CSS 布局的对象和基本单位, 直观点来说, ...

随机推荐

  1. MPC

    Just for anyone searching for code. I found it here: https://drive.google.com/drive/folders/0BzLEHBD ...

  2. 树莓派 IIC功能安装及测试

    参考连接: https://blog.csdn.net/panwen1111/article/details/81044428 https://blog.csdn.net/xukai871105/ar ...

  3. vim用法思维导图

  4. 【javascript】关于charCodeAt()方法

    在做算法题目leetcode 2283时,看见某些答案会使用charCodeAt(),因为自己没用过,所以作此纪录 描述在 JavaScript 中,charCodeAt() 是一种字符串方法,用于检 ...

  5. Linux 系统下挂载linux 系统盘

    1应用背景:有时候系统崩溃无法修复,无法正常启动,而系统盘里面有需要的文件如log等需要拷贝出来,或者系统盘可以正常启动但是不方便用一台设备来启动这个系统盘.而直接将Linux系统盘接到windows ...

  6. bat将多个文件夹下内容合并到一个文件夹下

    for /f "delims=" %%p in ('dir /b/ad') do copy %%p\*.* d:\all\ pause 目标文件夹 d:\all\ 最好不用中文目录

  7. IDEA 文件夹下无法新建java class文件问题处理：

    主要问题 1 未设置为源文件夹. 2 包名中包含关键字,也无法创建. 解决方式 1 文件夹右键---Mark Directory as----Test Sources Root 即可. 2 重命名

  8. Java--接口和抽象类有什么区别

    他们都不能实例化对象,都可以包含抽象方法,而且抽象方法必须被继承的类全部实现. 区别: 1.抽象类和接口都不能直接实例化,如果要实例化,抽象类变量必须指向实现所有抽象方法的子类对象,接口变量必须指向实 ...

  9. ADOStoredProc动态调用存储过程

    有些用ADOStoredProc进行操作时,要动态创建输入输出参数,一定要用 ADOStoredProc1.Parameters.Refresh;将参数进行刷新一下.

  10. k8s 关于pull image failed 问题

    问题描述: Failed to pull image "nginx": rpc error: code = Unknown desc = failed to pul 解决办法: 1 ...