BFC--margin折叠和清除浮动

时间 2019-12-09

标签 bfc margin 折叠清除浮动栏目 CSS 繁體版

原文原文链接

背景

之前在写html和css的时候，两个div都设置了margin不一样的上下值。写完后我开心的打开页面，为毛两个应该隔的比较开的div，距离并非我设置的margin值。因而我从marigin重合搜索到了BFC,因而我blahblah地看了一通，却没有看的很懂，只知其一;不知其二的我烦躁的放弃了。
最近忽然想深刻的了解下css，在看了几篇文章后，里面涉及到了我之前的问题，并从css标准和原理上讲解了，配合上例子，有了种豁然开朗的感受：原来margin会折叠是这个缘由！因此想把这种感受记录下来，也是一份对这部分知道的总结和巩固。css

BFC

1. 定义

块级格式化上下文（block formatting context）是页面 CSS 视觉渲染(visual CSS rendering)这个过程当中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。html

2. 建立BFC

根元素ide
绝对定位元素 (position 为 absolute 或 fixed)布局
float的值不为noneflex
display的值为:inline-block, table-cell, table-captions, flexspa
overflow的值不为visiblecode

margin折叠

属于同一个BFC的两个相邻Box的margin会发生折orm

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        div {
          width: 100px;
          height: 100px;
        }
    
        .a {
          background: lightblue;
          margin-bottom: 20px;
        }
    
        .b {
          background: orange;
          margin-top: 20px;
        }
      </style>
    </head>
    <body>
      <div class="a"></div>
      <div class="b"></div>
    </body>
    </html>

那如何阻止margin折叠呢，只要将其中一个box建立新的BFC就好了。(能够尝试不一样建立BFC的方法尝试，代码注释了)htm

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        * {
          margin: 0;
        }
        
        body {
          background: pink;
        }
        
        .p {
          width: 150px;
          height: 150px;
          margin-top: 20px;
          background: lightblue;
        }
        
        .s {
          width: 100px;
          height: 100px;
          margin-top: 30px;
          background: orange;
        }
        
        .bfc {
          overflow: hidden;
          /* display: inline-block; */
          /* position: absolute; */
          /* float: left; */
        }
        
      </style>
    </head>
    <body>
      <div class="p">
        <div class="s"></div>
      </div>
      
      <div class="p bfc">
        <div class="s"></div>
      </div>
    
    </body>
    </html>

BFC清除浮动

在计算BFC元素高度时，浮动元素的高度也会计算进去，因此能够达到清除浮动的效果(能够将下例尝试不一样建立BFC的方法来清除浮动)blog

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        * {
          margin: 0;
        }
        
        .wrap {
          width: 80px;
          border: 5px solid orange;
        }
        
        .a {
          width: 80px;
          height: 80px;
          background: lightblue;
        }
        
        .fl {
          float: left;
        }
        
        .bfc {
          overflow: hidden;
          /* display: inline-block; */
          /* position: absolute; */
          /* float: left; */
        }
      </style>
    </head>
    <body>
      <div class="wrap">
        <div class="a fl"></div>
      </div>
      <div style="clear: both;">
      <br>
      <div class="wrap bfc">
        <div class="a fl"></div>
      </div>
    </body>
    </html>

结束

第一次写这类总结，若是有什么不对的，但愿你们和谐交流。
BFC还有一些其余的布局规则，我只写出了我之前疑惑的点，也感谢我参考的几篇文章，下面是连接，你们有兴趣能够深刻研究下。

You Don't Know CSS
BFC神奇背后的原理
 详说BFC