关键词：
文章目录
将本人好久之前的 云笔记 搬到博客上来，统一维护。
1. bfc的理解（块级格式化上下文）
可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。
可通过css属性触发。
浮动元素产生了浮动流，块级元素看不到；
文本类属性的元素（inline)，文本元素和产生了bfc的元素都能看到浮动元素。
2. 触发bfc的方式：
定位、浮动、overflow: hidden、display不为null的各种。
（1）position:absolute或fixed；
（2）float:left/right;
（3）overflow:hidden; 不为visible， 常用方式;
（4）display:inline-block; table-cell,table-caption,flex,inline-flex.
3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子
利用BFC避免margin重叠。比如俩div挨着，margin都是100px，那么实际的上下间隙只有100px。
这时，就给分别外面包一层，加各自的bfc。
4. bfc布局规则特性：
（1）bfc中，盒子从顶端开始一个接一个排列。
（2）同属于一个 bfc 的相邻盒子的margin会合并。
解决办法：把上面的盒子外层加一个div并设置overflow:hidden；这时与下面盒子不属于一个bfc。
（3）计算bfc的高度时，会计算浮动盒子的高度。（下面的父元素高度不设，子元素浮动）
用于：清除元素内部浮动
只要把父元素设为 BFC 就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于 IE6 加上zoom:1就可以了。
（4）bfc产生右侧自适应的盒子。左侧div设置overflow：hidden；可解决。
场景一，未设置时：
div1设宽高并浮动（蓝色），div2不设宽只设高 （宽度自适应），未设浮动。
这时，文本元素“看到”浮动元素，即受浮动元素影响。
如图：
div2设置overflow：hidden;效果相当于浮动并可以宽度自适应。如图所示：
5. 两栏布局
思想：用BFC先设置右侧，再设置左侧。
（1）先把第一个元素绝对定位，right：0；或者float：right；
（2）再设置第二个，margin-right要给第一个留足够的位置即可。
6. 块元素高度不设或宽度不设的情况。
（1） 父div高度不设时，高度由子元素撑起。 伪代码：
.ff
margin-top:10px;
width: 200px;
height: 100px;
background: #2fe29e;
border: 1px solid #ccc;
.ss
width: 50px;
border: 1px solid #000;
<div class="ff">
<div class="ss">ss高度由子元素撑起</div>
</div>
如图：
（2）子元素div宽度不设时，默认为父元素宽度的100%，伪代码:
.ff
margin-top:10px;
width: 200px;
height: 100px;
background: #2fe29e;
border: 1px solid #ccc;
.ss
height: 50px;
border: 1px solid #000;
<div class="ff">
<div class="ss">ss宽度默认100%</div>
</div>
如图：
（3）如果子元素设置浮动，不占位置，而父元素高度未设置时，则父元素高度就为0。给父元素触发BFC（4个条件）解决这个问题。
eg: 子元素浮动，父元素会没有高度，触发bfc解决问题
.ff
margin-top: 10px;
width: 200px;
background: #2fe29e;
border: 5px solid #ccc;
/* 用bfc解决，任一条件 */
overflow: hidden;
/* float: left; */
/* display: inline-block; */
/* position: absolute; */
.ss
float: left;
height: 50px;
border: 1px solid #000;
<div class="ff">
<!-- 浮动之后宽度不是父元素的100%，由内容撑起,但不会超过父元素的宽度 -->
<div class="ss">ss宽度默认100%，是否浮动？是否浮动？</div>
<div class="ss">ss2宽度默认100% 是否浮动？</div>
</div>
不用bfc设置时，父元素高度为0，背景都没有，未达到效果，如图：
F12检查：
解决：
四个注释的css任取其一，设置之后，效果正常，如图：
bfc布局规则及触发条件(代码片段)
1 .BFC的含义： Block Formatting Contexts（BFC） ... 查看详情
前端面试css系列——bfc
介绍下BFC及其应用定义BFC（BlockFormattingContext）翻译为『块级格式化上下文』。是一个独立的渲染区域，只有（Block-levelbox）块级盒子参与，BFC规定了内部盒子如何布局，以及盒子之间的关系和作用。解释说明Box(盒子)Box盒子是CSS... 查看详情
css学习_cssbfc特性（块级格式化上下文）
块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题 1、什么是BFC？就是一个封闭独立的渲染的区域 2、什么元素会有BFC的条件？ ---块级元素会有，行内元素没有 3、什么情况下块级元素可以产生bfc... 查看详情
学习过css，那你知道bfc是什么吗？(代码片段)
...名词，本文就来介绍一下到底什么是BFC公众号：前端印象不定时有送书活动，记得关注~关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】一起来理 查看详情
bfc是什么？bfc有什么用？看完全明白(代码片段)
...FC内部的元素布局与外部互不影响；2、可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题；3、可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可。二、BFC有什么用？BFC的触发条件1、... 查看详情
前端必知：防抖与节流（面试题，复习）(代码片段)
...#xff0c;整理发到博客上，分享查阅方便。防抖与节流是前端面试中的高频题，需要理解透哦！防抖Q：简述什么是防抖？A：在第一次触发事件时，不立即执行函数，若计时器的时间间隔之内没有再次... 查看详情
bfc布局与ifc布局以及普通文档流布局(代码片段)
...：BFC里的元素与外面的元素不会发生影响那么，触发条件或者说哪些元素会生成BFC，满足下列条件之一就可触发BFC【1】根元素 【2】float的值不为none 【3】overflow的值不为visible（hidden、auto、scroll） ... 查看详情
前端面试css—bfc的渲染规则有哪些？有哪些应用场景？(代码片段)
1.BFC渲染规则1. BFC垂直方向边距重叠；2. BFC的区域不会与浮动元素的box重叠；3.BFC是一个独立的容器，外面的元素不会影响里面的元素；4. 计算BFC高度的时候浮动元素也会参与计算。2.BFC的应用场景1. 防止浮动导... 查看详情
☀️bfc是什么？如何触发？有什么应用场景？(代码片段)
...元素所组成）都会垂直的沿着其父元素的边框排列。触发条件一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：下列方式会创建块格式化上下文：根元素()浮动元素（元素的float不是none）绝对... 查看详情
(转)haslayout与bfc的触发条件
...览器上的两个作用很相近的概念，在很多时候，我们需要触发它们去实现有些效果。例如清除浮动时需要触发hasLayout与BFC；很多自适应的两栏和三栏布局（两边固定宽度，中间自适应）需要触发hasLayout与BFC；很多奇形怪状的IEbug... 查看详情
bfc布局(代码片段)
...块级盒子的区域，也是浮动元素与其他元素的交互区域。触发条件根元素,即HTML元素float的值不为noneoverflow的值不为visibledisplay的值为inline-block,table-cell,table-captionposition的值为absolute或fixed布局规则内部的box会在垂直方向,一个接一... 查看详情
前端面试题6道开胃菜css+js+vue(代码片段)
css区 一：BFC的相关：BFC的概念？了解：CSS2.1中只有 BFC 和 IFC, css3中还增加了 GFC 和 FFC。BFC定义：BFC（Blockformattingcontext）直译为“块级格式上下文”，它是一个独立渲染区域，只有BLOCK-LEV... 查看详情
第八篇css(代码片段)
...盒子，都会为他们的内容创建BFC（块级格式化上下文）BFC触发条件1、根元素，即HTML元素2、float的值不为none3、overflow的值不为visible(overflow的其他值：hidden、auto、scroll)4、display的值为inline-block、table-cell、table-caption、flow-root、flex... 查看详情
10分钟了解什么是bfc(代码片段)
BFC对于已经是一个耳熟能详的词汇了，而且在前端面试中，这题也是一个高频题。虽然我们平时在开发的时候知道如何利用BFC来解决问题，但是我们要具体说出BFC的概念和怎么触发BFC，我相信很多小伙伴也是和我一样不知道的什... 查看详情
☀️bfc是什么？如何触发？有什么应用场景？(代码片段)
面试官：说一说BFC吧我：??那是啥…💥BFC是什么BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的Block-levelBox如何布局，并且与这个区... 查看详情
☀️bfc是什么？如何触发？有什么应用场景？(代码片段)
面试官：说一说BFC吧我：??那是啥…💥BFC是什么BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的Block-levelBox如何布局，并且与这个区... 查看详情
前端基础必知必会(代码片段)
前言W3C规定网页由三部分组成：结构，表现，行为。结构指的就是HTML表现指的是CSS行为指的是JavaScript这是网页的三部分，是由万维网联盟W3C规范的。一、网页、网站网页是用HTML编写的一种文件，将这种文件... 查看详情
bfc(代码片段)
...一个HTTP元素要创建BFC，则要满足下列的任意一个或多个条件即可：float值不是noneposition的值不是static或者relativedisplay的值是inline-block、table-cell、flex、table-caption或者inline-flexoverflow的值不是visibleBFC是一个独立的布局环境，其中的... 查看详情