什么是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. Typora 基本功能

    Typora 基本功能 typora 下载官网:https://www.typora.io/       "安装到C盘" 基本使用 1.该文件后缀 .md2.六级标题 :ctrl+ ...

  2. Python笔记（1）——字符串（Python编程：从入门到实践）

    字符串 一.使用方法修改字符串大小写 1. 方法:变量.tittle():首字母大学显示字符串中的每个英文单词 2. 方法:变量.upper():字符串全改为大写 3. 方法:变量.lower():将 ...

  3. 记录一次HAWQ手工启动

    一.环境变量初始化 使用hawq的命令必须先进行环境变量的初始化 命令不能以 root 用户执行,应该以 gpadmin 用户执行 source /usr/local/apache-hawq/gree ...

  4. CentOS查看已安装的服务与卸载服务。。

    1:使用rpm查看, rmp -qa | grep servername rpm -qa 查看以安装的所有服务,grep过滤我们需要看的服务. 2:使用yum查看<此命令恕在下未能完全理解,可能 ...

  5. .net 生成Excel并保存

    void SaveQuestionToExcel(List<Question> datas, string path) { using (Workbook workbook = new H ...

  6. 117、商城业务---分布式事务---RabbitMQ延时队列

    1.定时任务存在的问题 即任务过期时间为30min,任务在第31min过期,但是在第60分钟才被扫描到 2.延时队列 是先设置一个过期队列,里面消息过期后不会丢弃而是通过交换机放到另一个队列中.从这个 ...

  7. SDN实验环境配置

  8. 7. 基础增删改 - 创建管理员用Model-Drive App管理后台信息 - 在Model-Driven App中创建视图

    ​ 当我们创建完Model-Driven之后,就可以在里面创建我们所需要的视图,视图一般分为三类: 个人:根据自己的个人需求创建个人视图,只有创建者和其分享的人才能查看这些视图. 公共:可以根据团体需 ...

  9. k8s集群角色管理

    查看集群各节点角色: [root@k8s-master-2 ~]# kubectl get nodes NAME STATUS ROLES AGE VERSION k8s-master-1 Ready ...

  10. 关于Appium执行用例过程中问题处理办法

    关于Appium执行用例过程中问题处理办法 1.     运行环境 1.1 windows10   64位系统 1.2 华为荣耀V10   Android 9 1.3 appium-desktop 1 ...