css布局中的BFC问题

css布局中的BFC问题

一、边距重叠

两个box如果都设置了边距，那么垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

有两种边距重叠的情况：

1.父子关系的边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。

解决办法是给父元素添加一个 overflow:hidden，这样父元素就变为BFC，不会随子元素产生外边距

2.同级兄弟关系的重叠

同级元素在垂直方向上外边距会出现重叠现象，最后外边距的大小取两者绝对值大的那个

可通过添加一个空元素或伪类元素，设置overflow:hidden;解决

<div style="overflow: hidden;"></div>

二、BFC

BFC就是“块级格式化上下文”的意思，简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。本身BFC是一种css样式的布局方式，只是我们可以利用它来解决外边距折叠的问题，但BFC并不是专门用来解决这个问题而创的

1.BFC触发的几种方式：

1. 浮动元素，float 除 none 以外的值；
2. 绝对定位元素，position（absolute，fixed）；
3. display 为以下其中之一的值 inline-block，table-cell，table-caption；
4. overflow 除了 visible 以外的值（hidden，auto）

2.BEC的应用

1. 可以用来自适应布局

   利用BFC的这个原理可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

   给左边盒子加浮动，右边盒子加overflow:hidden;变成BFC，就可以消除外部左边盒子因浮动对他的影响

   <style>
       .container{
         background: #ff0000;
       }
       .box{
         width: 100px;
         height: 100px;
         background: orange;
         float: left;
       }
       .box2{
         height: 120px;
         background: #ccc;
         overflow: hidden;
       }
     </style>
   

2. 可以清除浮动

   一个父元素中的子元素，设置浮动时，父元素没有设置高度，这时子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷。
   这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。

   <style>
       .container{
         background: #ff0000;
         border: 1px solid #000000;
         overflow: hidden;
       }
       .box{
         width: 100px;
         height: 100px;
         background: orange;
         float: left;
       }
     </style>
   

3. 解决垂直边距重叠

   可看上方垂直外边距重叠的问题