一、BFC的含义

BFC(block formatting contexts） 块级元素格式化上下文，它决定了块级元素如何对它的内容进行布局，以及与其它元素的关系和相互作用。

块级元素：父级（是一个块元素）

内容：子元素（是一个块元素）

其它元素：与内容同级别的兄弟元素

相互作用：BFC里的元素与外面的元素不会发生影响

二、浮动触发条件

1.float的值不为none

2.overflow的值不为visible

3.display的值为table-cell、table-caption、inline-block、inline-flex、flex

4.position的值为absolute或fixed

三、浮动应用场景

1.自适应两栏布局

<style>

    body {

        width: 300px;

        position: relative;

    }

    .aside {

        width: 100px;

        height: 150px;

        float: left;

        background: #f66;

    }

    .main {

        height: 200px;

        background: #fcc;
　　　　 //overflow：hidden；

    }

</style>

<body>

    <div class="aside"></div>

    <div class="main"></div>

</body>

原本为

在main中添加样式overflow：hidden，触发main生成BFC后

2.清除浮动

<style>

    .par {

        border: 5px solid #fcc;

        width: 300px;

        // overflow:hidden;

    }

    .child {

        border: 5px solid #f66;

        width:100px;

        height: 100px;

        float: left;

    }

</style>

<body>

    <div class="par">

        <div class="child"></div>

        <div class="child"></div>

    </div>

</body>

原图为

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

3.防止垂直margin重叠

   <style>

        p {

            color: #f55;

            background: #fcc;

            width: 200px;

            line-height: 100px;

            text-align:center;

            margin: 100px;

        }

    </style>

<body>

<p>Haha</p>

<p>Hehe</p>

</body>

此时margin会出现重叠取最大值为100margin

解决方法：在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

<style>

    .wrap {

        overflow: hidden;

    }

    p {

        color: #f55;

        background: #fcc;

        width: 200px;

        line-height: 100px;

        text-align:center;

        margin: 100px;

    }

</style>

<body>

    <p>Haha</p>

    <div class="wrap">

        <p>Hehe</p>

    </div>

</body>

效果如下

4.子元素添加margin-top，父元素会一起掉下来

四、BFC布局与普通文档流布局的区别

普通文档流布局规则

1.浮动的元素是不会被父级计算高度

2.非浮动元素会覆盖浮动元素的位置

3.margin会传递给父级

4.两个相邻元素上下margin会重叠

BFC布局规则

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

2. Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠(两个盒子在不同的BFC内，就不会发生重叠)。

3. 每个box的左边与包含块的左边相接触(对于从左往右的格式化，否则相反);即使存在浮动也是如此。

4. BFC的区域不会与float box重叠(两栏布局)。

5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素;反之也如此。

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

五、什么是浮动

在MDN中关于浮动的描述如下：

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

举个例子：

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .a{

            width: 50px;

            height: 50px;

            background-color: #04A5F0;

        }

    </style>

</head>

<body>

<div class="a">a</div>

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

</body>

显示结果如下：

然后添加float：left后

六、浮动对布局的影响

1.块级元素浮动将并排显示，不会独占一行

BFC与浮动的更多相关文章

  1. 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  2. BFC清除浮动

    BFC 就是清除浮动 用来处理文档脱离文档流的问题 清除浮动的方法: a.父元素也添加一个浮动 产生弊端就是:margin 不能使用 b.给父元素添加一个:display:inline-block 弊 ...

  3. bfc与浮动元素的关系

    首先说明两个特性: 1,浮动元素兄弟元素的布局规则 当html中存在浮动元素时,其兄弟元素的布局遵循如下规则: (1)块级元素的渲染无视浮动元素 (2)文本内容或者是行内元素的渲染会考虑到浮动元素的存 ...

  4. 浅谈对BFC的认识，以及用bfc解决浮动问题

    我们在前端的学习过程中常常会遇到BFC,用BFC来解决一些margin塌陷.margin合并清理浮动流的问题 那么问题来了,我们所说的BFC到底是个什么东西呢: 什么是BFC BFC(Block Fo ...

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

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

  6. 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- ...

  7. CSS3与页面布局学习总结（四）——页面布局大全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- ...

  8. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

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

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

随机推荐

  1. VS 2012 在 windows 8 中无法使用 Deubgger.Lunch() 对服务进行调试

    找到了外文资料:   Debugger.Launch() not displaying JIT debugger selection popup on Windows 8/8.1   If execu ...

  2. PetaPoco轻量级ORM框架 - 入门安装

    PetaPoco 是一个开源轻量级ORM,够小,够快,单文件 在GitHub上有很高的人气 1377星,几年来作者一直在更新 当前版本6.0.317 - Netstandard 2.0(同时支持.ne ...

  3. 015.4守护线程和join

    内容:守护线程.join方法#####################守护线程通过开启线程之前调用setDaemon()方法,变成后台线程,前台线程运行完,后台线程自动会结束#########例子 c ...

  4. GCD vs NSOperation

    GCD is a lightweight way to represent units of work that are going to be executed concurrently. You ...

  5. java多态-向上转型和向下转型

    向上转型:符合“is a”,是安全的,子类向上到父类,多余的属性和方法会丢弃 向下转型:不安全的,用instanceof提前判断一下,以免抛出异常 instanceof用法: result = obj ...

  6. Windows和Linux环境，网络异常模拟测试方法【转载自光荣之路微信公众号】

    1.网络异常的分类 在系统的运行过程中,可能会遇到各种各样的网络问题,其中主要可能出现的问题有 网络延迟:当网络信息流过大时,可能导致设备反应缓慢,造成数据传输延迟: 网路掉包:网路掉包是在数据传输的 ...

  7. BZOJ 1041 圆上的整点 数学

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1041 题目大意:求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整 ...

  8. UIView 中 hidden、alpha、clear color 与 opaque 的区别

    透明度与图层混合相关,影响到图片绘制的效率. hidden 此属性为 BOOL 值,用来表示 UIView 是否隐藏.关于隐藏大家都知道就是让 UIView 不显示而已,但是需要注意的是: 当前 UI ...

  9. [WebKit] JavaScriptCore解析--基础篇 (一)JSC与WebCore

    先看一下官方的基本介绍,短短几句就塞满了关键字. SquirrelFish,正式名称是JavaScriptCore,包括register-based(基于寄存器的虚拟机), direct-thread ...

  10. 【[SCOI2009]迷路】

    大水题一遍 过掉比较繁琐的拆点还是非常开心的 发现每一条边的边权可能不是\(1\),但是边权的范围非常小,同时点数也非常小,只有\(n<=10\),所以我们可以将一个点拆成九个点,之后随便一连边 ...