一、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. Effective C++(6) 如何拒绝编译器的自动生成函数

    问题聚焦: 如果不希望class支持某一成员函数,那么不声明和定义它就可以了,但是这一策略对与拷贝构造函数和重载赋值操作符并不起作用. 因为如果不声明它们,那么当尝试调用它们的时候,编译器会为你声明和 ...

  2. ZT android -- 蓝牙 bluetooth （一） 入门

    android -- 蓝牙 bluetooth (一) 入门 分类: Android的原生应用分析 2013-05-19 21:44 4543人阅读 评论(37) 收藏 举报 bluetooth4.2 ...

  3. 021.10 IO流 打印流

    内容:PrintStream:字节流    PrintWriter:字符流 PrintStream public static void main(String[] args) throws IOEx ...

  4. 在ubuntu上使用QQ的经历

    pidgin-lwqq: 项目首页:https://github.com/xiehuc/pidgin-lwqq sudo add-apt-repository ppa:lainme/pidgin-lw ...

  5. 更改mysql数据存储路径

    1.检查mysql数据库存放目录 mysql -u root -prootadmin show variables like '%dir%'; quit; (查看datadir 那一行所指的路径) 2 ...

  6. Centos7安装Redis4.0.8

    今天安装了CentOS7 1708 在安装redis时报错  make[1]: *** [adlist.o] 错误 127 因为Redis是C实现的,需要gcc来进行编译,所以原因是系统未安装gcc, ...

  7. 【[NOI2018]屠龙勇士】

    发现好像都是化掉系数之后套上\(ExCrt\)的板子 这好像是一个真正的扩展扩展中国剩余定理 我们要处理的方程是这样的形式 \[c_ix\equiv b_i(mod\ a_i)\] 其中\(c\)用一 ...

  8. pwnhub_WTP攻击思路--self-xss高级利用

    1.self-xss+302跳转构造csrf的利用: 1.login.php 存在跳转2.http://54.223.108.205:23333/login.php?redirecturl=//vps ...

  9. Linux学习总结（十七）-shell 基础知识

    一 先介绍几种常用字符: 1 * 匹配任意个任意字符2 ?匹配一个任意字符3 # 注释符号,符号后的语句不被执行4 \脱意字符,后面跟带含义字符时,照原字符输出5 []匹配包含在[]之中的任意一个字符 ...

  10. BurpSuite Intruder 4种攻击模式

    BurpSuite intruder attack-type 4种爆破模式 Sniper 单参数爆破,多参数时同一个字典按顺序替换各参数,总之初始值有一个参数不变 Battering ram 多参数同 ...