CSS 中的margin塌陷、合并、元素浮动的问题，以及使用BFC解决margin塌陷问题

最新推荐文章于 2024-07-16 17:18:30 发布

背影＃

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量171

点赞数 1

分类专栏：前端入门文章标签： css html

本文链接：https://blog.csdn.net/AI_dkx/article/details/127750679

版权

入门同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

文章目录

margin塌陷、合并、元素浮动问题，BFC解决margin塌陷，

margin塌陷、合并、元素浮动问题，BFC解决margin塌陷，

一、代码复现 `margin塌陷` 问题

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin-left: 300px;
            margin-top: 300px;
            /* overflow: hidden; */
            /* display: inline-block; */
            /* position: absolute; */
            /* float: left; */
        }

        .box{
            height: 100px;
            width: 100px;
            background-color: #ff0;
            margin-left: 100px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
</html>

1.1 margin塌陷问题描述

当父元素和子元素同时设置了 margin-top 会取父和子中间大的那个 margin-top 去作用，子元素的 margin-top 并不会在父级的 margin-top 基础上相加，此时产生了 margin 塌陷的问题

1.2 两种方案可以解决margin塌陷问题

给父元素顶部加一个边框 border-top: 1px solid #000;，可以设置为透明色让用户无法看到边框，但是不推荐，因为会造成样式的偏差（虽然仅有1个像素）。
触发父元素的¹，使其变为一个 ¹ 容器，触发的方式有一下四种，但是这个问题不能被完美的解决掉，因为使用下面四个的任一个都会对元素产生影响，例如超出父容器不需要隐藏内容时使用overflow: hidden; 就会让超出的部分隐藏，产生另一个问题
1. 给父元素添加 overflow: hidden;
2. 将父元素变成内联块元素 display: inline-block;
3. 给元素添加绝对定位 position: absolute;
4. 给父元素添加浮动 float: left;

二、代码复现 `margin合并` 问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            height: 100px;
            width: 100px;
            background-color: #f3f;
            margin-bottom: 100px;
        }

        .box2{
            height: 100px;
            width: 100px;
            background-color: #ff0;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

margin合并问题描述

有两个相邻的元素，当上面的元素设置了 margin-bottom 下面的元素设置了 margin-top 时，会产生 margin 合并问题

此类方法不用解决，因为这种问题，在开发中可以避免，如果需要 margin 值，则只设置 margin-top 或者 margin-bottom 一次设置到位即可，使用数学技术来规避此类问题

三、元素浮动(float)以及浮动流问题

1.1 简单介绍

浮动元素产生了浮动流，对后面的元素产生的影响有一下两点

所有产生了浮动流的元素，块级元素看不到他们

产生了BFC的元素和文本类属性（凡是带有inline属性的都是文本类元素）的元素以及文本都能看到浮动元素

浮动带来的问题示例：父元素中包含浮动元素时，因为父元素应该是块元素，所以看不到产生了浮动流的子元素，这是父元素的高度将没办法被内容撑开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            border: 1px solid black;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: #b8e986;
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

1.2 解决浮动流带来的问题

清除最后一个元素带来的浮动流
添加 html 标签，来清除浮动，但是此方法会改变 HTML 的文档结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .wrap {
        border: 1px solid black;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: #b8e986;
        float: left;
      }
      /* html标签清除浮动 */
      .clear {
        clear: both;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <!-- html标签清除浮动 -->
      <p class="clear"></p>
    </div>
  </body>
</html>

使用伪元素 ::after 清除浮动（伪元素：可以被css操作，但不存在于html结构中，天生是 inline）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .wrap {
        border: 1px solid black;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: #b8e986;
        float: left;
      }
      /* 伪元素清除浮动 */
      .clearfix::after {
        content: "";
        display: block; /* 只有块级元素才能清除浮动 */
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="wrap clearfix">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </body>
</html>