BFC是个什么概念？
在布局中一般就三种定位方式：普通流、浮动、绝对定位。
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是个什么概念？的更多相关文章
- 前端笔记之CSS（下）浮动&BFC&定位&Hack
一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/heigh ...
- 什么是BFC（Block Formatting Context）
原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatt ...
- BFC 从了解到放弃
最近工作中我突然产生了一个想法,就如我们人类面临的终极问题一般,我从哪里来?我到哪里去?在撸代码进行CSS布局的时候,我会去想,我为什么这么做?,为什么浮动的元素要用overflow?,为什么要用cl ...
- CSS 潜藏着的BFC
在写样式时,往往是添加了一个样式,又或者是修改了某个属性,就达到了我们的预期. 而BFC就潜藏在其中,当你修改样式时,一不小心就能触发它而毫无察觉,因此没有意识到BFC的神奇之处. 什么是BFC(Bl ...
- BFC 浅谈
写在前面 Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置使用新的元素构建BFC overflow:hidden ...
- BFC理解
Block formatting context (块级格式化上下文) 页面文档由块block构成 每个block在页面上占据自己的位置 使用新的元素构建BFC overflow:hidden | a ...
- BFC 是什么？
BFC 是什么? 本文写于 2020 年 7 月 17 日 总有同学问我:"这个 div 为什么会插出来?为什么 float 的 div 这么不好操作?".这其实就是没有深入理解 ...
- CSS十问——好奇心+刨根问底=CSSer
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...
- 有时summary的状态和details是否有open属性有关
用过mac的同学对这个界面一定很熟悉,因为这个界面和我们今天要说的details有很多相近的地方,首先,其有折叠效果,用户可以自己选择打开或关闭哪一个,其次,当我们直接打开的时候,默认会有几个标签是打 ...
随机推荐
- Linux任务计划命令 :crontab -e
crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond ...
- 用STS构建spring boot
操作步骤:1. 登录地址http://spring.io/tools 下载sts,spring-tool-suite-3.9.5.RELEASE-e4.8.0-win32-x86_64.zip2. 解 ...
- JupyterLab绘制:柱状图,饼状图,直方图,散点图,折线图
JupyterLab绘图 喜欢python的同学,可以到 https://v3u.cn/(刘悦的技术博客) 里面去看看,爬虫,数据库,flask,Django,机器学习,前端知识点,JavaScrip ...
- SpringBoot+Mybatis配置Pagehelper分页插件实现自动分页
SpringBoot+Mybatis配置Pagehelper分页插件实现自动分页 **SpringBoot+Mybatis使用Pagehelper分页插件自动分页,非常好用,不用在自己去计算和组装了. ...
- Win7 VS2017编译PBR渲染引擎google filament
按照官方说明 https://github.com/google/filament 前置工具包 Windows 10 SDKVisual Studio 2017Clang 6Python 3.7Git ...
- opencv2.4.13+python2.7学习笔记--OpenCV中的图像处理--图像轮廓
阅读对象:无要求. 1.代码 ''' OpenCV中的轮廓 轮廓可以简单认为成将连续的点(连着边界)连在一起的曲线,具有相同的颜色或者灰度.为了更加准确,要使用二值化图像.在寻找轮廓之前,要进行阈值化 ...
- CSS3新增特性及知识学习线路
- JavaScript自定义鼠标右键菜单
下面为JavaScript代码 window.onload = function () { //好友列表 var f = 0; //判断指定id的元素在页面中是否存在 if (document.get ...
- Openvswitch手册(7): Interfaces
我们来看Interfaces ofport: OpenFlow port number for this interface. type: system: An ordinary network de ...
- centos7安装git踩坑记
之前自己是按照Git 服务器搭建这篇博客来安装git服务器的,一步步顺序下来,但git clone的时候,每次都要求输入密码.说好的SSH免密登录呢.前后搞了一天多才搞定,现在记录下踩过的坑. 坑1: ...