BFC理解

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

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

核心：html

新的BFC，给出了新的不受外界影响的块级格式化环境  
block 块级-> 页面的基础  
formatting context 格式化-> 渲染

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

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

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

BFC的约束规则

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

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

如何建立BFC？=>从新规划一个（独立）渲染区域flex
- 根元素body，自然是一个BFC
- overflow:hidden;
- float 不为none
- display:inline-block | table-cell |table-caption
- position:absolute | fixed 只要不为static

> 好像只剩块级元素和行内元素不是BFC

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

在元素 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>

3、每一个元素的左边，要与包含盒子的左边相接触
4、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>

注意：orm

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

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

.clearfix:after{
    content:'';
    display:table;
    clear:both
}
.clearfix{
    *zoom:1;/* IE6,7不支持BFC，因此须要经过专有的CSS属性，触发hasLayout。*/
}

关于zoom:1blog

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

BFC的约束规则

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