写在前面

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让浮动元素也参与计算

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    		 
        <style>
            *{padding: 0;margin: 0;}
            .par{
                border: 5px solid #fcc;
                width: 300px;

            /* overflow: hidden; */
                display: inline-block;
            }
            .child{
                border: 5px solid #f66;  
                width: 100px;
                height: 100px;
                float: left;
                /* clear: both; */
            }
        </style>
    </head>
    <body>
        <!-- 网页的定位（大） 文档流正常，浮动，定位，flex，table -->
        大专栏  BFC 浅谈ss="tag"><div class="par">
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </body>
    ```  
    - 三、每个元素的左边，要与包含盒子的左边相接触
    - 四、BFC的区域不会与float box重叠  
    ```html
        <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>
    ```   
    ```html
    /*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。  
    ```css
    .clearfix:after{
        content:'';
        display:table;
        clear:both
    }
    .clearfix{
        *zoom:1;/* IE6,7不支持BFC，所以需要通过专有的CSS属性，触发hasLayout。*/
    }

关于zoom:1

BFC 浅谈的更多相关文章

  1. 【css】浅谈BFC

    定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...

  2. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  3. 浅谈 LayoutInflater

    浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...

  4. 浅谈Java的throw与throws

    转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...

  5. 浅谈SQL注入风险 - 一个Login拿下Server

    前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...

  6. 浅谈WebService的版本兼容性设计

    在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...

  7. 浅谈angular2+ionic2

    浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2 ...

  8. iOS开发之浅谈MVVM的架构设计与团队协作

    今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...

  9. Linux特殊符号浅谈

    Linux特殊字符浅谈 我们经常跟键盘上面那些特殊符号比如(?.!.~...)打交道,其实在Linux有其独特的含义,大致可以分为三类:Linux特殊符号.通配符.正则表达式. Linux特殊符号又可 ...

随机推荐

  1. 非线性支持向量机SVM

    非线性支持向量机SVM 对于线性不可分的数据集, 我们引入了核(参考:核方法·核技巧·核函数) 线性支持向量机的算法如下: 将线性支持向量机转换成非线性支持向量机只需要将变为核函数即可: 非线性支持向 ...

  2. JavaScript中Promise 使用、原理以及实现过程

    1.什么是 Promise promise 是目前 JS 异步编程的主流解决方案,遵循 Promises/A+ 方案. 2.Promise 原理简析 (1)promise 本身相当于一个状态机,拥有三 ...

  3. macOS更新失败解决

    下载离线更新包解决. https://support.apple.com/downloads/combo

  4. 直播弹幕抓取逆向分析流程总结 websocket,flash

    前端无秘密 直播的逆向抓取说到底是前端的调试和逆向技术,加上部分的dpa(深入包分析,个人能力尚作不到深入,只能作简单分析)难度较低 目前互联网直播弹幕主要是两种技术实现. 1websocket消息通 ...

  5. jenkins推送docker镜像到远程仓库

    参考链接:https://blog.csdn.net/qq_34252622/article/details/92791262

  6. TPO3-2Depletion of Ogallala Aquifer

    The vast grasslands of the High Plains in the central United States were settled by farmers and ranc ...

  7. SVN服务器的搭建（二）

    上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下如何使用VisualSVN Server建立版本库,以及TortoiseSVN的使用. 首先打开Vi ...

  8. 2019-2020-1 20199324《Linux内核原理与分析》第六周作业

    第五章 系统调用的三层机制(下) 1.给MenuOS增加命令 进入Linuxkernel目录下,强制删除当前menu目录,再重新克隆一个新版本的menu 进入menu,运行make roofts脚本就 ...

  9. 吴裕雄--天生自然python学习笔记：python 用pygame模块游戏开发

    游戏开发在软件开发领域占据了非常重要的位直.游 戏开发需要用到的技术相当广泛,除了多媒体.图片.动 画的处理外,程序设计更是游戏开发的核心内容. Py game 是为了让 Python 能够进行游戏开 ...

  10. Normal Probability Plots|outlier

    6.4 Assessing Normality; Normal Probability Plots The normal probability plot is a graphical techniq ...