写在前面

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. spring前两天

    1,Spring是什么 (1) Spring是JavaEE 一站式,轻量级 容器框架 ① JavaEE :企业级 ② 一站式: JavaWeb开发的三层 直接使用Spring一个框架全部完成 ③ 轻量 ...

  2. js中使用EL表达式总结

    1.js中使用el表达式要加双引号或单引号:'${list}' 2.js变量获取el表达式中的对象:不能直接获取,直接获取得到的是该对象的toString值. 有两种方法:一:el中直接写对象的属性v ...

  3. NOIP2000提高组T1 进制转换

    https://www.luogu.org/problem/P1017 题目描述 我们可以用这样的方式来表示一个十进制数: 将每个阿拉伯数字乘以一个以该数字所处位置的值减1为指数,以10为底数的幂之和 ...

  4. SAP 配置表根据输入的值带出描述

    在SAP客制功能需求中,为了程式的灵活配置采用配置表的形成,使后期使用中不需要更改源代码实现功能的增加.在配置表的使用过程中,有时候会有这样的需求:在配置中输入或选择了编码,根据编码带出描述.以下详细 ...

  5. C#面向对象---对象成员、方法加载、引用类库

    一.方法重载: 1.两个函数同名,就互相构成方法的重载关系 2.重载的函数,必须跟其他函数之间具有不同的参数类型或参数个数 二.字段与属性 类的字段: 类里面是可以直接定义变量的,这些变量就叫类的字段 ...

  6. Mock测试，何去何从

    2016-10-24   出处:Qtest之道  作/译者:闫耀珍   上面的情景是不是似曾相识呢?现今的业务系统已经很少是孤立存在的了,尤其对于一个大公司而言,各个部门之间的配合非常密切,我们或多或 ...

  7. docker常用的命令-在自己心情低落的时候，告诫自己不要把负能量带给别人。

    daocker基础命令:https://www.cnblogs.com/xiaowenshu/p/10474746.html 一.Docker常用命令 安装部署好Dokcer后,执行的命令是docke ...

  8. Jmeter阶梯式压测

    https://www.cnblogs.com/Zfc-Cjk/p/11639219.html 什么是阶梯式压测? 阶梯式压测,就是对系统的压力呈现阶梯性增加的过程,每个阶段压力值都要增加一个数量值, ...

  9. 允许外部访问Windows本机的指定端口

    背景:目前公司有一台公网Windows服务器,有公网IP和内网IP,防火墙已开启 需求:9999端口需要对外开放 方案:在防火墙的入站规则里添加一条规则,使外部能够访问9999端口 问题:添加好规则后 ...

  10. 【转】Vim命令合集

    Vim命令合集 命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filena ...