CSS中关于触发BFC

一、BFC 定义

　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

二、BFC布局规则：
1、BFC布局规则：
（1） 内部的Box会在垂直方向，一个接一个地放置。
（2） Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
（3） 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
（4） BFC的区域不会与float box重叠。
（5） BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
（6） 计算BFC的高度时，浮动元素也参与计算


三、哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible


--------------------------------------------------------------------------------------------------------------
做一个侧边栏目但是被包含了

<span style="font-size:18px;"><div class="aside"></div>
<div class="main"></div>


.aside {
            width: 100px;
            height: 150px;
            float: left;
            background: #f66;
        }
        .main {
            height: 200px;
            background: #fcc;
        }</span>

---------------------------------------------------------------------------------------------------------------
是不是出问题了呢？
--出发BFC

 .main {
            height: 200px;
            background: #fcc;
            overflow: hidden;
        }

--------------------------------------------------------------------------------------------------------------
经典的上边距重叠问题
实验2:

.main{
            background-color: darkgrey;
            width: 700px;
        }
.first{
            margin-top: 100px;
            width: 50px;
            height: 50px;
            background-color: #000000;
        }
        .second{
            width: 50px;
            height: 50px;
            background-color: blue;
        }

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

margin-top: 100px;---这句话如果加上和没加有什么区别呢  ------------BFC的区域不会与float box重叠 用main触发BFC


实验3:影响别的元素

 .main{
            background-color: darkgrey;
            width: 700px;
        }
        .first{
            width: 50px;
            height: 50px;
            background-color: #000000;
        }
        .second{
            width: 50px;
            height: 50px;
            background-color: blue;
            margin-left: 800px;
        }

当我们给main里边的元素设置了过多的值800px的时候,势必会印象外边的东西
当我们设置了BFC的时候，就不会发生这种情况-------------------BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素


实验:

.box {width:210px;border: 1px solid #000;float: left;}
        .img {width: 100px;height: 100px;background: #696;float: left;}
        .info {background: #ccc;color: #fff;}
<div class="box">
    <div class="img">image</div>
    <p class="info">hello world</p>
</div>

当文字变多的时候会发生什么事情呢？
我们发现，文字环绕了---这很忧伤
这时候我们可以单独为P出发我们的BFC
  .info {background: #ccc;color: #fff;overflow: hidden}

实验

<span style="font-size:18px;"><div class="par">
	<div class="child"></div>
	<div class="child"></div>
</div>


  .par {
            border: 5px solid #fcc;
            width: 300px;
        }
   .child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
       }</span>

发生了什么？float之后的元素没有撑开我们的盒子，而我们的原则，计算BFC的高度时，浮动元素也参与计算

.par {
            border: 5px solid #fcc;
            width: 300px;
            overflow: hidden;
        }

触发BFC
案例：

<span style="font-size:18px;">  p {
            color: #f55;
            background: #fcc;
            width: 200px;
            line-height: 100px;
            text-align:center;
            margin: 100px;
        }
       
<p>Haha</p>
<p>Hehe</p></span>

出问题了，BFC里边元素margin重叠了

<span style="font-size:18px;"><p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>

 .wrap {
            overflow: hidden;
        }</span>