CSS理解：BFC和边距重叠

最新推荐文章于 2023-04-12 16:47:42 发布

VIP文章 SevenBig

最新推荐文章于 2023-04-12 16:47:42 发布

阅读量960

点赞数 1

分类专栏： css 文章标签： css 块级格式化上下文

本文链接：https://blog.csdn.net/itseven7/article/details/79009215

版权

什么是BFC

BFC （block formatting context）及块级格式化上下文，从样式上看，具有 BFC 的元素与普通的容器没有什么区别，从功能上看，BFC相当于构建了一个密闭的盒子模型，在BFC中的元素不受外部元素的影响；

个人理解：BFC就是将盒子中子元素的属性锁在父元素中，例如margin,float 使其不影响盒子外的元素。

如何构建BFC

以下情况都会使元素产生BFC
- 根元素或其它包含它的元素 (也就是html元素本身就是BFC)
- float:left ,right
- position:absolute,fixed
- display:inline-block,table-cell,table-caption;(行内块元素与表格元素)
- overflow：hidden，auto，scroll （非 visible属性）
- display: flow-root
- column-span: all

BFC的作用

1. 解决高度塌陷

由于浮动元素脱离了文档流，普通盒子是无法包裹住已经浮动的元素；父级元素的高度为0；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer ">
        <div style="float: left;"></div>
    </div>
</body>
</html>

当子元素浮动父级获取不到浮动元素的高度，造成高度塌陷，看下图：
这里写图片描述

当父元素转变为BFC时，浮动元素被包裹住

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px</