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

写页面时会遇到：

子元素float父元素的高度不会撑开;
在布局时，box1and box2,其中box1 float：left，这是box2会在box1下面，(如果文字过多就会形成文字环绕效果)，但我就是想要box2在box1的右侧;
又或是上下两个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的布局规则啦
滴滴滴...

内部的box会一个接一个地垂直布局。

两个相邻box的垂直距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个盒子的左外边框紧挨着左边框的包含块(从左往右的格式化时，否则相反)。即使存在浮动也是如此

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算.

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

 <section class="container">
        <style>
            .container{
                color:#FFF;
                width: 300px;
                margin:100px auto;
                border:1px solid #330033;
            }
            .left{
                float: left;
                width: 100px;
                height: 80px;
                background: #FF0066;
            }
            .right{
                background: #FFCCFF;
            }    
        </style>
        <div class="left">我是left</div>
        <div class="right">我是right</div>
    </section>

效果：

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

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

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

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

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

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

哇，好了呀！

问题3：magin重叠问题

   <section class="container">
        <style>
            .container{
                color:#FFF;
                width: 300px;
                margin:100px auto;
                border:1px solid #330033;
                overflow: auto;
            }
            .box1,.box2{
                height: 50px;
            }
            .box1{
                background: #FF0066;
                margin-bottom:20px;
            }
            .box2{
                background: #FFCCFF;
                margin-top:50px;
            }            
        </style>
        <div class="box1">我是box1</div>
        <div class="box2">我是box2</div>
    </section>

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

        ...
        .wrapper{
               overflow:hidden;
          }  
        ...
        <div class="wrapper">
             <div class="box1">我是box1</div>
        </div>       
        <!-- <div class="wrapper"> -->
        <div class="box2">我是box2</div>
        <!-- </div> -->

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

关于垂直margin折叠

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值;

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值;

两个外边距一正一负时，折叠结果是两者的相加的和;

最后的最后，欢迎指正~

猜你喜欢