Block formatting context （块级格式化上下文）

页面文档由块block构成 每个block在页面上占据自己的位置
使用新的元素构建BFC overflow：hidden | auto | scroll； 只要不为visible 新的空间
告诉浏览器，外面的环境影响不到我了 我重新来进行Block formatting 布局和定位

核心：

新的BFC，给出了新的不受外界影响的块级格式化环境

block 块级-> 页面的基础

formatting context 格式化-> 渲染

浏览器构建文档树的时候 布局和定位元素

网页的定位（大） 文档流正常，浮动，定位，flex，table
广义的定位 块级元素的定位 垂直的定位；行内元素 左右定位 通过内容来确定
狭义的定位：
float 浮动元素，在一行的开始或者结束
flex 弹性布局
position

BFC 在正常的文档流里面重建一个新的上下文环境

BFC的约束规则

  • 一、在浏览器进行页面元素布局的时候 同一个BFC的两个相邻的Box的margin 会重叠，与方向无关

    破坏规则 创建新的BFC Context上下文的概念

    如何创建BFC？=>重新规划一个（独立）渲染区域

    • 根元素body，天然是一个BFC
    • overflow:hidden;
    • float 不为none
    • display:inline-block | table-cell |table-caption
    • position:absolute | fixed 只要不为static
> 好像只剩块级元素和行内元素不是BFC

  • 二、BFC的高度，浮动元素也要参与计算

    在元素float 之后脱离了文档流没有办法计算确切高度，这种情况我们称之为高度塌陷。解决高度塌陷的前提就是能识别并包含到浮动元素。而BFC就有这个特性，所以BFC也可以计算浮动元素的高度。新建BFC让浮动元素也参与计算

    <style>

        *{padding: 0;margin: 0;}

        .par{

            border: 5px solid #fcc;

            width: 300px;

            /*这里的overflow并不是为了超出则隐藏，而是为了创建一个BFC*/

            /* overflow: hidden; */

            display: inline-block;

        }

        .child{

            border: 5px solid #f66;

            width: 100px;

            height: 100px;

            float: left;

            /* clear: both; */

        }

    </style>

</head>

<body>

    <!-- 网页的定位（大） 文档流正常，浮动，定位，flex，table -->

    <div class="par">

        <div class="child"></div>

        <div class="child"></div>

    </div>

</body>
  • 三、每个元素的左边，要与包含盒子的左边相接触
  • 四、BFC的区域不会与float box重叠
    <style>

        *{padding: 0;margin: 0;}

        .aside{

            float: left;

            width: 100px;

            height: 150px;

            background-color: #ff6666;

        }

        .main{

            height: 200px;

            background: #ffcccc;

            /* clear: left; */

            overflow: hidden;

        }

    </style>

</head>

<body>

    <!-- 自适应两栏式布局 类似于flex：1；

    aside 和 main 处于同一BFC（body）下

    BFC布局规则3 规则4 -->

    <div class="aside"></div>

    <div class="main"></div>

</body>
/*BFC在三栏式布局中的应用*/

    <style>

        *{padding: 0;margin: 0;}

        .container{

            height: 200px;

        }

        .left,.right,.center{

            height: 200px;

        }

        .left{

            background: pink;

            float: left;

            width: 180px;

        }

        .right{

            background: lightblue;

            width: 180px;

            float: right;

        }

        .center{

            background: yellow;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <!-- 三栏式布局 -->

    <div class="container">

        <!-- 页面的结构与呈现效果不一致？想一下 -->

        <div class="left">Left</div>

        <div class="right">Right</div>

        <div class="center">Center</div>

    </div>

</body>

注意：

通过 overflow:hidden将元素转换为BFC，固然可以解决高度塌陷的问题，但是大范围的应用在布局上是肯定是行不通的，毕竟overflow会造成溢出隐藏的问题，特别是与JS交互的效果时。

那有没有一个更好的高度检测方法呢？
答案是有的，就是我们经常用到的clearfix。

.clearfix:after{

    content:'';

    display:table;

    clear:both

}

.clearfix{

    *zoom:1;/* IE6,7不支持BFC，所以需要通过专有的CSS属性，触发hasLayout。*/

}

关于zoom:1

BFC理解的更多相关文章

  1. 关于css盒子模型和BFC的理解

    CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...

  2. 10 分钟理解 BFC 原理

    一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至 ...

  3. 10分钟理解BFC原理

    10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照 ...

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

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

  5. BFC是个什么概念？

    在布局中一般就三种定位方式:普通流.浮动.绝对定位. BFC,译过来叫作“块级格式化上下文”,听起来贼高大上,它属于普通流的一种.通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无 ...

  6. BFC(块级格式化上下文)

    转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details ...

  7. 什么是BFC？

    转载自知乎:https://zhuanlan.zhihu.com/p/25321647 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: ...

  8. 10分钟了解什么是BFC

    BFC对于已经是一个耳熟能详的词汇了,而且在前端面试中,这题也是一个高频题.虽然我们平时在开发的时候知道如何利用BFC来解决问题,但是我们要具体说出BFC的概念和怎么触发BFC,我相信很多小伙伴也是和 ...

  9. 浅析CSS里的 BFC 和 IFC

    前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到:   前端必备图书<Web安全开发指南 掌握白 ...

随机推荐

  1. LeetCode-093-复原 IP 地址

    复原 IP 地址 题目描述:给定一个只包含数字的字符串,用以表示一个 IP 地址,返回所有可能从 s 获得的 有效 IP 地址 .你可以按任何顺序返回答案. 有效 IP 地址 正好由四个整数(每个整数 ...

  2. .NetCore Web Api 利用ActionFilterAttribute统一接口返回值格式

    .Net Core 同 Asp.Net MVC一样有几种过滤器,这里不再赘述每个过滤器的执行顺序与作用. 在实际项目开发过程中,统一API返回值格式对前端或第三方调用将是非常必要的,在.NetCore ...

  3. 9.resultMap元素

    resultMap 是 MyBatis 中最复杂的元素,主要用于解决实体类属性名与数据库表中字段名不一致的情况,可以将查询结果映射成实体对象.下面我们先从最简单的功能开始介绍. 现有的 MyBatis ...

  4. C盘爆满，你的专属清道夫来啦

    一.C盘目录介绍 ■ 本人电脑信息:联想拯救者Win10 家庭版 1.C盘根目录默认目录情况: Intel:装Intel驱动,解压文件的临时文件,之前百度了解到它是一个有关Intel芯片信息的文件,可 ...

  5. Java子类继承父类的执行顺序

    父类的静态代码块(static) 子类的静态代码块(static) 父类的非静态代码块(父类成员初始化) 父类的构造方法 子类的非静态代码块(子类成员初始化) 子类的构造方法

  6. 将su模型导入arcgis，并获取高度信息，多面体转shp文件（ArcMap）

    问题:将Sketchup中导出的su模型,导入arcgis并得到面shp文件,进而获取各建筑的高度.面积等信息. 思路: (1)导入arcgis得到多面体 (2)转为面shp文件 (3)计算高度/面积 ...

  7. 拓扑排序 python

    现在你总共有 numCourses 门课需要选,记为 0 到 numCourses - 1.给你一个数组 prerequisites ,其中 prerequisites[i] = [ai, bi] , ...

  8. 创世区块配置文件genesis.json的格式解读

    创世区块配置文件genesis.json的格式解读 中文网站上关于genesis 的解析大多数都来自于这个Gist:Ethereum private network configuration gui ...

  9. 发现Compound的第二个严重漏洞

    本文转自 发现Compound的第二个严重漏洞 | 登链社区 | 深入浅出区块链技术 (learnblockchain.cn) 这个漏洞原作者在2022年02月23日已经发布过,由于内容比较敏感,发布 ...

  10. RabbitMQ Go客户端教程2——任务队列/工作队列

    本文翻译自RabbitMQ官网的Go语言客户端系列教程,本文首发于我的个人博客:liwenzhou.com,教程共分为六篇,本文是第二篇--任务队列. 这些教程涵盖了使用RabbitMQ创建消息传递应 ...