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

时间 2019-11-07

标签理解 bfc 以及相关布局问题解决繁體版

原文原文链接

写页面时会遇到：html

子元素float父元素的高度不会撑开;
在布局时，box1and box2,其中box1 float：left，这是box2会在box1下面，(若是文字过多就会造成文字环绕效果)，但我就是想要box2在box1的右侧;
又或是上下两个box的margin重叠。

这些问题除了其余一些方法解决外，均可以利用加上overflow:hidden，可是why?其实 BFC的做用呢。
BFC??啥？
BFC这个词....app

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'。布局

那它是怎么造成的呢？flex

如下状况之一：spa

float值不为none

position:fixed / absolute

display:table-cell / table-caption /inline-block / flex / inline-flex.

overflow属性不为visible

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

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

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

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

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

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

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

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

<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>

效果：
htm

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

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

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

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折叠

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

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

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

最后的最后，欢迎指正~