BFC:块格式化上下文(Block Formatting Context)

是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品

(如果一个元素符合触发 BFC 的条件,则 BFC 中的元素布局不受外部影响)

哪些条件会形成BFC?

1、浮动元素 float:left | right | inherit(none除外)
2、position:absolute 或 fixed 定位
3、display:inline-block | inline-flex | table-cell
4、overflow:hidden | auto | scroll (visible除外)

BFC的特性:

1、bfc 是一个独立的容器,容器内子元素不会影响容器外的元素
2、bfc的区域不会与float的元素区域重叠
3、计算bfc的高度时,浮动元素也参与计算
4、垂直方向上的距离由margin决定
5、内部的Box会在垂直方向上一个接一个的放置

栗子:

bfc的区域不会与float的元素区域重叠,使用overflow:hidden解决

<div class="column1"></div>
<div class="column2"></div>
.column1{
width:200px;
height:200px;
margin-right:12px;
background:orangered;
float:left;
}
.column2{
width:100%;
height:200px;
background:yellow;
/* overflow:hidden;/*实现BFC*/
}

使用overflow:hidden前和使用后

使用后

外边距重叠

<div class="outside">
<div class="box1"></div>
<div class="box2"></div>
</div>
    .outside{
width: 100px;
height: 100px;
background: deeppink;
}
.box1{
height:30px;
margin:10px 0;
background:orange;
}
.box2{
height:30px;
margin:30px 0;
background:orange;
}

由于垂直外边距会折叠,因此两个box盒子的垂直距离为30px而不是40px。

解决方法,把其中一个box放在另一个BFC容器里面

<div class="outside">
<div class="box1"></div>
<div class="content">
<div class="box2"></div>
</div>
</div>
.content{
overflow:hidden;
}

内部的Box会在垂直方向上一个接一个的放置

<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
.container{
/*position:absolute;/*实现BFC*/
height:auto;
background:gray;
}
.item{
height:30px;
}
.item1{
width:200px;
background:deepskyblue;
}
.item2{
width:100px;
background:yellow;
float:left;
}
.item3{
width:300px;
background:pink;
}
.item4{
width:400px;
background:brown;
}

内部的Box会在垂直方向上一个接一个的放置,浮动的元素也是这样,box3浮动,他依然接着上一个盒子垂直排列。并且所有的盒子都左对齐

理解BFC的更多相关文章

  1. 全面理解BFC

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

  2. 深入理解BFC和Margin Collapse

    深入理解BFC和Margin Collapse   BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威 ...

  3. 理解 BFC

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

  4. 10分钟理解BFC原理

    10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照 ...

  5. 10 分钟理解 BFC 原理

    一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至 ...

  6. 深入理解BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  7. 深入理解BFC

    定义 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上 ...

  8. 深入理解BFC和外边距合并(Margin Collapse)

    一.什么是BFC? 1.BFC的概念 BFC全称Block Formatting Context ,直译“块级格式化上下文”,也有译作“块级格式化范围”.它是 W3C CSS 2.1 规范中的一个概念 ...

  9. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

随机推荐

  1. 在 CentOS 上编写 init.d service script [转]

    背景:之前编写了一些脚本,下载了一些开源软件,想把它们做成系统服务,通过 service your_prog_name start 这样的方式来后台运行,并在开机时自动启动.在了解了 daemon 命 ...

  2. python3 fileinput模块

    模块fileinput可以对一个或多个文件的内容所有行进行迭代.遍历等操作: 常用方法: fileinput.input(files=None, inplace=False, backup='', b ...

  3. [luogu2051][bzoj1801][AHOI2009]chess中国象棋【动态规划】

    题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中国象棋中炮的行走方式是 ...

  4. 使用rt-thread中BSP-stm32 ENV构建工具报错

    @2019-01-23 [小记] --路径问题 参照rtt官方<STM32 系列 BSP 制作教程> 构建项目时出现如下错误 error1:打开 menuconfig 出错 解决方法: 根 ...

  5. 工作机制.py

    rpc_server.py# !/usr/bin/env python3.5# -*- coding:utf-8 -*-# __author__ == 'LuoTianShuai'"&quo ...

  6. luogu3278/bzoj3323 多项式的运算 (splay)

    mulx的操作,其实就是给r+1的系数+=r的系数,然后删掉r,把l~r-1向右移一位,再插一个0到原来的位置 splay维护区间加和区间乘就好了 (一定要注意做事的顺序,一件事都做完了再去做别的,否 ...

  7. PHP基础学习----字符串操作

    1.单引号和双引号的区别 在php中,字符串的定义可以使用英文单引号'',也可以使用英文双引号“”: <?php $str = 'hello'; echo "str is $str&q ...

  8. Django(二十)model中的 class Meta

    https://www.cnblogs.com/tongchengbin/p/7670927.html class Main(models.Model): img = models.CharField ...

  9. python3+django2 开发易语言网络验证(下)

    第六步:网络验证服务器端项目上线部署 功夫不负有心人,终于部署成功啦! 前期准备: 项目名:netauth 系统:百度云服务器下的Ubuntu16.4 软件:xshell(无论如何想办法用这个跟服务器 ...

  10. 第二篇-ubuntu18.04下怎么制作GIF动画

    一.在桌面打开终端 二.接着通过apt安装byzanz.sudo apt-get install byzanz 三.安装完成后在终端执行“xwininfo”.xwininfo 四.然后鼠标会变成“+” ...