BFC 解决各种问题_bfcooldown-优快云博客

本文链接：https://blog.youkuaiyun.com/lcxdawn/article/details/127581851

描述：

- 在文档流中，如果没有设置高度，则父元素的宽度为auto,高度由子元素撑开

- 当子元素设置浮动，则子元素会脱离文档流，此时子元素则无法撑开父元素，导致父元素高度塌陷

- 如果父元素塌陷,则父元素下的兄弟元素会上移，导致布局混乱

<style>
        /* 
         使用BFC解决父元素塌陷问题
            overflow: hidden
        */
        .outer{
            width: 200px;
            border: 1px solid blue;
            overflow: hidden;
        }
        .inner{
            width: 200px;
            height: 200px;
            float: left;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="outer">
       <div class="inner">

       </div>
    </div>

外边距传递:

-如果子元素和父元素垂直外边距相邻，子元素设的外边距就会传递给父元素，

发生传递现象

传递条件：

1、外边距相邻

2、垂直方向

 /*
         使用特性：

         - 父元素的垂直边距不会和子元素重叠

         开启BFC：
         - overflow: hidden;
        */
        .outer{
            width: 200px;
            height: 200px;
            background-color: brown;
            overflow: hidden; 
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top:100px
        }
    </style>
</head>
<body>
    <div class="outer">
      <div class="inner"></div>
    </div>
</body>

- 外边距重叠

- 页面中相邻元素的垂直反向外边距会发生叠加现象，被称为外边距重叠

- 外边距重叠会使用兄弟元素的相邻外边距的最大值

条件：

1、外边距相邻（外边距之间没有“内容”隔开）

2、垂直方向

解决方式：

-在垂直方向添加元素，让兄弟元素的外边距不相邻

<style>
      .box1{
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-bottom: 100px;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: brown;
        margin-top: 100px;
      }
      .outer{
        overflow: hidden;
      }

    </style>
</head>
<body>
    <div class="outer">
    <div class="box1"></div>
    </div>
    <div class="box2"></div>

解决元素覆盖

<style>
        .box1{
          width: 100px;
          height: 100px;
          background-color: brown;
          float: left;
        }
        .box2{
         width: 100%;
         height: 100px;
         background-color: aqua;
         overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>