什么是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. Jenkins集成appium自动化测试

    一,引入问题 自动化测试脚本绝大部分用于回归测试,这就需要制定执行策略,如每天.代码更新后.项目上线前定时执行,才能达到最好的效果,这时就需要进行Jenkins集成. 不像web UI自动化测试可以使 ...

  2. OSIDP-并发：死锁和饥饿-06

    死锁原理 死锁:一组相互竞争系统资源或者进行通信的进程间"永久"阻塞的现象. 资源分为两类:可重用资源和可消耗资源. 可重用资源:一次只能被一个进程使用且不会被耗尽的资源.如处理器 ...

  3. 微信内置浏览器的JsAPI(WeixinJSBridge)

    参考: https://www.baidufe.com/item/f07a3be0b23b4c9606bb.html https://github.com/zxlie/WeixinApi

  4. APIView使用

    1 CBV源码分析 # 基于类的视图--->讲过了 -必须要继承它:from django.views import View  # drf的东西,都是写cbv,必须要继承View​​##### ...

  5. JSON数据转对象遍历

    String json = "[{\"n\":\"北京\",\"i\":11,\"p\":0,\"y ...

  6. C/S 架构 和 B/S 架构

    C/S架构的理解: 官方称:clinet-server 客户端需要下载的软件: 今日头条,爱奇艺等  能在手机和浏览器打开的软件 B/S架构的理解: 官方称:web-server 客户端为浏览器的: ...

  7. idea导入数据库

    yml文件(在启动项文件(main)里,eg:springbook文件里面) sh-bean里org.example.sh.beans的Category类   CategoryDAO名字要和Categ ...

  8. SqlServer提示对象名无效

    执行脚本 exec sp_msforeachtable "sp_changeobjectowner '?','dbo'"

  9. vue路由重复跳转导致控制台报错

    重复跳转了同一个页面,导致空值台报错了! 解决思路: 方案1:在路由跳转时捕获错误. 1.1 全局捕获处理 //index.js import VueRouter from 'vue-router' ...

  10. celery介绍安装以及基本使用步骤

    目录 一.关于celery 二.celery架构的构成 1 任务中间件 Broker, 2 任务执行单元 worker 3 结果存储 backend 三.celery的应用场景 1. 异步执行:解决耗 ...