在布局中一般就三种定位方式：普通流、浮动、绝对定位。

　　BFC，译过来叫作“块级格式化上下文”，听起来贼高大上，它属于普通流的一种。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部的布局。

　　假如我在body里面写两个div如下：

<body>

    <div></div>

    <div></div>

</body>

　　给他们都添加如下样式：

    width: 100px;

    height: 100px;

    background: lightblue;

    margin: 100px;

　　那么，在同一个BFC（也就是body）下，它们会发生外边距的合并，也就是说，两个方块的垂直距离为100px;所以如果你想避免这两个盒子的样式相互影响，把它们分别放在不同的容器就好了。把代码改成这样：

　　

　　注意：这里的div作为父级容器要设置其overflow：hidden来触发BFC特性，如此一来，两个p标签的垂直高度就变成了200px。

　　我们都知道，如果父级容器不设置高度，而它包含的子元素又浮动，那就会使得父级容器的高度发生坍塌，变为0,这还是挺恐怖的。为了避免这个问题，又不想把高度写死，可以设置父级容器的overflow：hidden来触发自身的BFC特性，就好像开了个大招，因为BFC的特性中是会包裹浮动元素的，而BFC又是对外不影响的。所以在保住自身高度的同时也避免了自己子元素的浮动对外部造成影响，这就是父级容器设置overflow:hidden可以清除浮动的原理。

　　总结：给父级容器添加overflow：hidden，一键启动其BFC特性，可以包裹自身的所有样式，包括浮动、边距等，免除对外界样式的影响。

　　追加： 触发BFC的几种条件：

　　1，父级容器overflow不为visible。

　　2，父级容器display为flex/grid。

　　2，父级元素或自身display为inline-block。

　　3，自身是绝对定位(absolute)或固定定位（fixed）。

　　4，自身的float不为none。

　　

BFC是个什么概念？的更多相关文章

  1. 前端笔记之CSS（下）浮动&BFC&定位&Hack

    一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/heigh ...

  2. 什么是BFC（Block Formatting Context）

    原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatt ...

  3. BFC 从了解到放弃

    最近工作中我突然产生了一个想法,就如我们人类面临的终极问题一般,我从哪里来?我到哪里去?在撸代码进行CSS布局的时候,我会去想,我为什么这么做?,为什么浮动的元素要用overflow?,为什么要用cl ...

  4. CSS 潜藏着的BFC

    在写样式时,往往是添加了一个样式,又或者是修改了某个属性,就达到了我们的预期. 而BFC就潜藏在其中,当你修改样式时,一不小心就能触发它而毫无察觉,因此没有意识到BFC的神奇之处. 什么是BFC(Bl ...

  5. BFC 浅谈

    写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden ...

  6. BFC理解

    Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置 使用新的元素构建BFC overflow:hidden | a ...

  7. BFC 是什么？

    BFC 是什么? 本文写于 2020 年 7 月 17 日 总有同学问我:"这个 div 为什么会插出来?为什么 float 的 div 这么不好操作?".这其实就是没有深入理解 ...

  8. CSS十问——好奇心+刨根问底=CSSer

    最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...

  9. 有时summary的状态和details是否有open属性有关

    用过mac的同学对这个界面一定很熟悉,因为这个界面和我们今天要说的details有很多相近的地方,首先,其有折叠效果,用户可以自己选择打开或关闭哪一个,其次,当我们直接打开的时候,默认会有几个标签是打 ...

随机推荐

  1. 父组件传值给子组件的v-model属性

    父组件如何修改子组件中绑定的v-model属性 因为v-model属性是双向数据绑定,而vue的通信方式又是单向通信,所以,当子组件想要改变父组件传过来的值的属性时,就会报错,典型的就是父组件传值给子 ...

  2. keras常见参数input_dim、input_length理解

    在看keras文档embedding层的时候,不太理解其中的input_dim 和input_length 这两个参数,查阅了一下资料,记录下来. keras.layers.Embedding(inp ...

  3. lwip协议栈学习---udp

    书籍:<嵌入式网络那些事-lwip协议> udp协议的优点: 1)基于IP协议,无连接的用户数据报协议,适用于传送大批量数据, 2)实时性比较高,适用于嵌入式网络 发送函数:udp_sen ...

  4. Exp2后门原理与实践_20154305 _ 齐 帅

    Exp2后门原理与实践 20154305 _ 齐 帅 2.1简单后门 一.后门工具介绍 1.netcat(nc.ncat) 是一个底层工具,进行基本的TCP UDP数据收发.常被与其他工具结合使用,起 ...

  5. 算法学习笔记：knn理论介绍

    阅读对象:了解指示函数,了解训练集.测试集的概念. 1.简介 knn算法是监督学习中分类方法的一种.所谓监督学习与非监督学习,是指训练数据是否有标注类别,若有则为监督学习,若否则为非监督学习.所谓K近 ...

  6. HTTP 初步探究

    网络上存在很多资源,也持续不断地生成新的资源.为了新建.获取和操作这些资源,引来了两个问题:如何定位资源,如何对他们进行操作.第一个问题引申出了 URI / URL 即 uniform resourc ...

  7. Docker构建其它组件

    构建mysql 运行centos7容器 docker run --privileged -dti --name=centos-container centos:7 /usr/sbin/init 查询c ...

  8. junit 方法：assertEquals 和 assertTrue

    assertEquals 和 assertTrue 区别相同之处:都能判断两个值是否相等 assertTrue 如果为true,则运行success,反之Failure assertEquals 如果 ...

  9. html基础知识梳理

    1.浏览器内核 补充:blink为Google与Opera共同开发. 2.web标准 web标准为w3c和其他标准化组织制定的一系列标准的集合.(标签闭合.小写.不乱嵌套,使用外链css/js;结构行 ...

  10. 【腾讯Bugly干货分享】经典随机Crash之一：线程安全

    本文作者:鲁可--腾讯SNG专项测试组 测试工程师 背景 Android QQ 在2016下半年连着好几个版本二灰 Crash 率都很高,如果说有新需求,一灰的 Crash 率高,还能找点理由,可是开 ...