理解BFC以及BFC相关布局问题解决

写页面时会遇到：

1. 子元素float父元素的高度不会撑开;
2. 在布局时，box1and box2,其中box1 float：left，这是box2会在box1下面，(如果文字过多就会形成文字环绕效果)，但我就是想要box2在box1的右侧;
3. 又或是上下两个box的margin重叠。
   这些问题除了其他一些方法解决外，都可以利用加上overflow:hidden，但是why?其实 BFC的作用呢。
   BFC??啥？
   BFC这个词....

BFC：全称box formatting context;即块格式上下文，block-level元素参与；

那么什么是block-level呢？
等等 等等...
'W3C' CSS2.1规范：
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display'property make an element block-level: 'block', 'list-item', and 'table'.
块级元素是源文档中被视为块（例如段落）可视化格式的那些元素。 'display'属性的以下值构成一个块级别：'block'，'list-item'和'table'。

那它是怎么形成的呢？

以下情况之一：

• float值不为none
• position:fixed / absolute
• display:table-cell / table-caption /inline-block / flex / inline-flex.
• overflow属性不为visible

我们知道了什么是BFC,如何形成BFC，接下来就要说BFC的布局规则啦
滴滴滴...

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

该知道的理论也差不多了，该解答了~
问题1：子元素float父元素的高度不会撑开

 

        
        
我是left
        
我是right
    

效果：

image.png

我们看到container只是right的高，而left中float使该元素脱离了文档流它的高没有计算在内，现在要想left的高度计算在内，根据BFC布局规则6就可以，形成一个BFC区不就可以计算float的高度喽，来，上码：

.container{
                color:#FFF;
                width: 300px;
                margin:100px auto;
                border:1px solid #330033;
                overflow: hidden;
            }

image.png

果真嘿，其实，这里不止加overflow：hidden,加上边介绍任何一种可以形成BFC区奏行，比如：overflow: auto; / float: left; /display: flex;等等，根据项目中的实际需求。

2.问题2：box2在box1右侧
在问题1里的代码基础上，把right区增加一个高度比如300px，就可以看到效果liu

image.png

           .right{
                background: #FFCCFF;
                height: 300px;
                overflow: hidden;
            }

由于left块float的原因，导致right在left下面，解决此问题
根据BFC布局规则4 ：BFC的区域不会与float box重叠，那么right形成BFC区
效果：

image.png

哇，好了呀！

问题3：magin重叠问题

   

        
        
我是box1
        
我是box2
    

image.png

我们大多以为是80px，可结果却是50px!
why?
BFC原则2指明了同一个BFC区的margin垂直重叠，不在同一个是不是就不重叠了，来来来

        ...
        .wrapper{
               overflow:hidden;
          }  
        ...
        

             
我是box1
        
       
        
        
我是box2
        

ok!通过给box1或box2添加一个父元素形成和另一个不在同一区。

关于垂直margin折叠

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值;
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值;
• 两个外边距一正一负时，折叠结果是两者的相加的和;

最后的最后，欢迎指正~