简单介绍BFC

　BFC

　　就是块级格式化上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。

　创建 BFC 的方式有：

　　1.html的根元素

　　2.float浮动

　　3.绝对定位

　　4.overflow不为 visible

　　5.display为表格布局或弹性布局

　　6.contain值为layout

　　7.content或 strict的元素等。

　

　BFC的作用：

　　1.清除浮动

　　2.解决margin塌陷问题

　

　BFC的特点：

　　1.内部box会一个一个的垂直放置

　　2.形成了BFC的区域不会与float box重叠，BFC在页面是个独立的容器，里外元素互不影响

　　3.BFC在计算高度时会把浮动元素计算进去

　　4.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）

BFC的作用及其应用的更多相关文章

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

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

  2. 浅析BFC及其作用

    本文链接:https://blog.csdn.net/riddle1981/article/details/52126522

  3. BFC的概念及作用

    在了解什么是BFC之前,首先得明白什么是Box , Formatting Context (一个决定如何渲染文档的容器)的概念 Box: CSS布局的基本单位 Box是 CSS 布局的对象和基本单位, ...

  4. 浅析BFC布局的概念以及作用

    BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与 ...

  5. BFC的概念、BFC触发方式、BFC作用介绍

    一.BFC的概念 GFC——block fomatting context(中文译为块级格式化上下文) 二. 如何触发BFC 1. 设置 float 除 none 以外的值(left.right) 2 ...

  6. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  7. 前端精选文摘：BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  8. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  9. BFC,定位，浮动，7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

随机推荐

  1. Linux 网络性能测试工具 iperf 的安装和使用

    简介:Iperf是一个网络性能测试工具.可以测试TCP和UDP带宽质量,可以测量最大TCP带宽,具有多种参数和UDP特性,可以报告带宽,延迟抖动和数据包丢失.Iperf在Linux和windows平台 ...

  2. linux环境下完成jenkins的环境搭建

    环境搭建部署: 请完成jenkins的环境搭建,需安装tomcat,mysql. Jenkins 地址:  https://jenkins.io/download/ 步骤分析: 1.全部操作使用普通用 ...

  3. Java学习日记基础（五）——类、对象之this、静态变量(类变量)、静态方法(类方法)、四大特征

    this 赵本山问奥尼尔:“我的爸爸的爸爸是谁?” 奥尼尔:“不知道” 赵本山:“你傻啊,是我爷爷” 奥尼尔回去问科比:“我的爸爸的爸爸是谁?” 科比:“不知道” 奥尼尔:”你傻啊,是赵本山的爷爷“ ...

  4. 入门cmake，窥探编译过程

    https://www.cnblogs.com/hg-love-dfc/p/10242391.html https://www.cnblogs.com/hg-love-dfc/p/10244328.h ...

  5. spring boot 之 如何创建spring boot项目

    创建spring boot的方式有非常多,今天我们使用maven来进行创建spring boot项目,因为maven使用的非常广泛,也很好用,很多IDE也都支持maven. 1 创建maven项目 1 ...

  6. firewall-cmd命令详解

    https://blog.csdn.net/GMingZhou/article/details/78090963 实例 # 安装firewalld yum install firewalld fire ...

  7. C++利用openssl进行公钥解密

    私钥加密的部分内容,需要用公钥解密下面的实例代码,由于私钥加密后的字符串有不可打印字符,所以程序里面进行了base64,要用的时候先解dec base64 再传递给函数 进行解密 #include & ...

  8. CAP C3-2分析

    一致性 可用性 分区容错性 <Hadoop构建数据仓库实践> p84

  9. wordpress插件开发流程梳理

    1.声明一个插件 首先我们必须明白,wordpress的插件可以是单文件,也可以是多文件,css/html都不是必须的,以下举例暂且在单文件模式下 比如我们要创建一个名为 hellophp的插件,那我 ...

  10. django模型多对多调用

    对于如下的模型: from django.db import models # Create your models here. class Student(models.Model): name = ...