BFC--margin折叠和清除浮动

最新推荐文章于 2025-07-03 23:26:32 发布

转载最新推荐文章于 2025-07-03 23:26:32 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000007577233

本文详细解析了CSS中块级格式化上下文(BFC)的概念及其创建方式，并通过实例展示了如何利用BFC解决margin折叠问题。

背景

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

BFC

1. 定义

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

2. 创建BFC

根元素
绝对定位元素 (position 为 absolute 或 fixed)
float的值不为none
display的值为:inline-block, table-cell, table-captions, flex
overflow的值不为visible

margin折叠

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


    <!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的方法尝试，代码注释了)


    <!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的方法来清除浮动)


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