01 BFC官方解释

https://www.w3.org/TR/CSS2/visuren.html#normal-flow

大致意思如下

02 什么情况下会形成BFC

MDN解释

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts

03 BFC的作用

https://www.w3.org/TR/CSS2/visuren.html#normal-flow



大致意思



图解如下

3.1 折叠现象

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    .box1 {

      width: 400px;

      height: 200px;

      background-color: orange;

      margin-bottom: 30px;

    }

    .box2 {

      width: 300px;

      height: 200px;

      margin-top: 50px;

      background-color: brown;

    }

  </style>

</head>

<body>

    <div class="box1"></div>

  <div class="box2"></div>

</body>

</html>

3.2 解决折叠

让它们处在不同的BFC中



效果如下

可以看到根本没有解决折叠的现象



这是因为它们还处在同一个BFC中即html根元素的BFC中

修改代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    .container {

      overflow: hidden;

    }

    .box1 {

      width: 400px;

      height: 200px;

      background-color: orange;

      margin-bottom: 30px;

      overflow: hidden;

    }

    .box2 {

      width: 300px;

      height: 200px;

      margin-top: 50px;

      background-color: brown;

    }

  </style>

</head>

<body>

  <div class="container">

    <div class="box1"></div>

  </div>

  <div class="box2"></div>

</body>

</html>

这样box1就处于container的BFC中，box2处于html中的BFC

3.3 BFC解决浮动高度塌陷

3.3.1 常用解决方法清除浮动

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    .box {

      background-color: orange;

    }

    .box .item {

      float: left;

      width: 400px;

      height: 200px;

      border: 1px solid #000;

      background-color: brown;

    }

    .clear-fix::after {

      content: "";

      clear: both;

      display: block;

      visibility: hidden;

      height: 0;

    }

  </style>

</head>

<body>

  <div class="box clear-fix">

    <div class="item "></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

  </div>

</body>

</html>

![[00029.png]]

3.3.2 BFC解决

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    .box {

      overflow: hidden;

      background-color: orange;

    }

    .box .item {

      float: left;

      width: 400px;

      height: 200px;

      border: 1px solid #000;

      background-color: brown;

    }

  </style>

</head>

<body>

  <div class="box">

    <div class="item "></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

  </div>

</body>

</html>

![[03-HTML+CSS额外补充知识点/imgs/00029.png]]

官方解释

![[00030.png]]

15-BFC的更多相关文章

  1. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  2. 一天搞定CSS：BFC布局与普通文档流布局比较--15

    BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义 它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用 关键词解释: 块级元素:父级( ...

  3. 什么是BFC？（转载）

    在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很 ...

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

  5. CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  6. 前端里神奇的BFC 原理剖析

    以前在做自适应两栏布局的时候别人口中听到bfc这个词,于是看了各种关于bfc的文章,发现梦想天空介绍的不错,今天就在他的基础上润色一下. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 B ...

  7. 【转】前端精选文摘：BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  8. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  9. 15.python的for循环与迭代器、生成器

    在前面学习讲完while循环之后,现在终于要将for循环这个坑填上了.之所以拖到现在是因为for循环对前面讲过的序列.字典.集合都是有效的,讲完前面的内容再来讲for循环会更加容易上手. 首先,for ...

  10. 重新认识Box Model、IFC、BFC和Collapsing margins

    尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...

随机推荐

  1. SQL server 树形递归查询

    1,原始查询 原始表格查询: select * from dbo.T_DeptInfo; 原始表格查询结果: 2,递归查询 -- with 一个临时表(括号里包括的是你要查询的列名) with tem ...

  2. LogAgen的工作流程

    LogAgen的工作流程: 一.读日志 --tailf 第三方库 新建tail_test/main.go package main import ( "fmt" "git ...

  3. MindSpore反向传播配置关键字参数

    技术背景 在MindSpore深度学习框架中,我们可以向construct函数传输必备参数或者关键字参数,这跟普通的Python函数没有什么区别.但是对于MindSpore中的自定义反向传播bprop ...

  4. 利用pearcmd实现裸文件包含

    利用pearcmd实现裸文件包含 在 ctf 中,常常有这样一类题: 题目很简单,一般围绕一个 include 函数展开. 例: ctfshow 元旦水友赛 easy_include 这类题目没有提供 ...

  5. ༺$Musique Collection 1$༻

    ~~头图~~ 自取捏 <\(Landslide\)>-\(Oh\,Wonder\) I know it hurts sometimes but You'll get over it You ...

  6. C语言：将字符逆反排列再输出的问题

    代码: #include<stdio.h> #define N 10 int main() { /*输入字符串,str[10],将里面的字符逆反排列,再输出.*/ char ch[N]; ...

  7. pageoffice 5.x升级到pageoffice 6.x的关键步骤

    Vue+Springboot前后端分离项目 将后端Springboot项目中pom.xml文件中对于pageoffice的jar引用升级成6.0版本,以maven中央仓库(https://mvnrep ...

  8. ASP.NET Core Web中使用AutoMapper进行对象映射

    前言 在日常开发中,我们常常需要将一个对象映射到另一个对象,这个过程中可能需要编写大量的重复性代码,如果每次都手动编写,不仅会影响开发效率,而且当项目越来越复杂.庞大的时候还容易出现错误.为了解决这个 ...

  9. RocketMQ主从同步原理

    一. 主从同步概述 主从同步这个概念相信大家在平时的工作中,多少都会听到.其目的主要是用于做一备份类操作,以及一些读写分离场景.比如我们常用的关系型数据库mysql,就有主从同步功能在. 主从同步,就 ...

  10. mac for docker访问宿主机服务

    转载链接 https://blog.csdn.net/weixin_33860528/article/details/91461648