一、什么是BFC

css布局主要采用盒子模型（BOX），元素的类型和 display 属性，决定了 Box 的类型，常见的盒子类型有两种：

  • block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。
  • inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。

不同类型的BOX如何渲染是由Formatting context决定的,Formatting context是页面中的一个渲染区域，并且拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC(Block formatting context)直译为"块级格式化上下文"，它的作用对像是block-level类型的盒子，是页面上具有隔离功能的独立容器，它规定了其内部的Block-level Box如何布局，容器里面的子元素不会影响到外面的元素。

二、BFC布局规则

1.内部的Box在垂直方向一个接一个地放置。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.所有属于BFC的box都默认左对齐，并且它们的左边距可以触及到容器container的左边。浮动的box也不例外

4.BFC的区域不会与float box重叠。

这个看字面意思不好理解，直接看例子

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

*{

    margin:0;

    padding:0;

    font-size:12px;

}

.box{

    width:300px;

    overflow:auto;

}

.leftbox{

    background:#CCC;

    width:100px;

    height:30px;

    float:left;

}

.textbox{

    width:200px;

    background:#FFCCCC;

}

</style>

</head>  

<body>

<div class="box">

    <div class="leftbox">浮动元素</div>

    <div class="textbox">文字从这里开始，不会被浮动元素遮住</div>

</div>

</body>

</html>

5.计算BFC的高度时，浮动元素也参与计算

整个布局规则可以体现为下面这张图

三、哪些元素会生成BFC

根元素（也就是body元）
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

四、BFC应用场景

1.防止外边距合并，外边距合并的文章，请点这篇

2.清除子元素的浮动(子元素浮动后会引起父元素容器高度塌陷)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    .par {

        border: 5px solid blue;

        width: 300px;

    }

    .child {

        border: 1px solid green;

        width:100px;

        height: 100px;

        float: left;

    }

</style>

<body>

    <div class="par">

        <div class="child">子元素1</div>

        <div class="child">子元素2</div>

    </div>

</body>

</html>

我们想要的效果如下图

代码执行后实际效果

为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

BFC相关知识的更多相关文章

  1. 【Python五篇慢慢弹（5）】类的继承案例解析，python相关知识延伸

    类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...

  2. 移动WEB像素相关知识

    了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...

  3. listener监听器的相关知识

    从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...

  4. UIViewController相关知识

    title: UIViewController 相关知识date: 2015-12-13 11:50categories: IOS tags: UIViewController 小小程序猿我的博客:h ...

  5. 【转】java NIO 相关知识

    原文地址:http://www.iteye.com/magazines/132-Java-NIO Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的 ...

  6. NSString使用stringWithFormat拼接的相关知识

    NSString使用stringWithFormat拼接的相关知识 保留2位小数点 1 2 3 4 //.2代表小数点后面保留2位(2代表保留的数量) NSString *string = [NSSt ...

  7. iOS网络相关知识总结

    iOS网络相关知识总结 1.关于请求NSURLRequest? 我们经常讲的GET/POST/PUT等请求是指我们要向服务器发出的NSMutableURLRequest的类型; 我们可以设置Reque ...

  8. 电路相关知识--读<<继电器是如何成为CPU的>>

    电路相关知识–读<<继电器是如何成为CPU的>> */--> *///--> *///--> 电路相关知识–读<<继电器是如何成为CPU的> ...

  9. 地址标记，SpringMVC转发与调用相关知识存档

    1.mytest_mavenprj1中,index的 <a href="login/login.html">点击登录</a> 与 <a href=&q ...

随机推荐

  1. May 2 2017 Week 18 Tuesday

    The beauty of the journey is found in the scenery along the way. 旅行之美在于沿途所见的风景. Several years ago, I ...

  2. April 4 2017 Week 14 Tuesday

    Problems are not stop signs, they are guidelines. 问题不是休止符,而是引向标. It is ture during our explorations ...

  3. 51Nod 1600 Simple KMP SAM+LCT/树链剖分

    1600 Simple KMP 对于一个字符串|S|,我们定义fail[i],表示最大的x使得S[1..x]=S[i-x+1..i],满足(x<i)显然对于一个字符串,如果我们将每个0<= ...

  4. cocos2d-x推断sprite点击

    我们经常须要推断用户的点击操作是否落于某个sprite之上,进而让这个sprite做出响应. 可是假设我们通过继承CCSprite类来实现自己的Sprite类的时候,产生的视图尺寸会充满屏幕.多个Sp ...

  5. 模拟网页的浏览Stack(POJ1028)

    题目链接:http://poj.org/problem?id=1028 注意: 1.用两个栈来模拟,一个用来存可以返回的,一个用来存可以前进的. 2.visit方法,就要将可以前进的栈清空. 3.ba ...

  6. ORA-01262，oracle启动报错，及Oracle启动原理

    错误状态: SQL> startup ORA-01261: Parameter db_recovery_file_dest destination string cannot be transl ...

  7. 第26章 FMC—扩展外部SDRAM—零死角玩转STM32-F429系列

    第26章     FMC—扩展外部SDRAM 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/ ...

  8. 清除ie10+浏览器的input输入框后面会出现的x号和闭眼logo

    x号:::-ms-clear{display:none;} 闭眼logo: ::-ms-reveal{display:none;} tips:如果在外部引用的css里面没有作用,可以在写本页面的< ...

  9. c/c++基础

    如果有你认为重要的知识点,而我这却没有记录下来的,那么期待你分享给我(^U^)ノ~YO. 1.在结构体中,符号->的前面是指针变量,符号.的前面是普通变量.   程序中a->b等价于(*a ...

  10. 泉五培训Day3

    T1 家庭作业 题目 [问题描述] 小P为了能高效完成作业,规定每项作业花一个单位时间. 他的学习日从0时刻开始,有100000个单位时间.在任一时刻,他都可以选择编号1~N的N项作业中的任意一项作业 ...