CSS解决引浮动float产生的塌陷问题怎么解决？

我在学习CSS的时候经常遇到这样的一个问题，就是因为浮动后导致整个页面塌陷，下面我们一起来学习一下怎么解决这个高度塌陷的问题吧！

首先我们高度塌陷是因为子元素产生浮动，导致父元素无法监测到子元素的变化，从而导致高度塌陷。

那麽我们怎么解决呢？这里分享我对于这个高度塌陷的解决方法：

第一种解决方法，通过添加一个div解决这个问题。给这个div设置一个清除样式的浮动，clear:both;

<div class="clearfix"></div>

 .clearfix {
            clear: both;
        }

第二种解决方法是给父元素添加一个伪类after，::after表是在后缀追加什么；比如我的父盒子是red，那麽就给父盒子red设置一个伪类，通过这个方式来解决，这个也是比较常见的解决塌陷的方法。[推荐]

.red::after {
            content: '';
            clear: both;
            display: block;
        } 

第三个事BFC，通过高度自适应，然后设置overflow的任意值，比如hidden，scroll等值来解决高度塌陷。通过设置overflow触发BFC机制，解决塌陷

.red {
    width:400px
     height: auto;
     overflow: scroll;
}

在这里普及一个点：就是行内元素是不能设置宽度的，比如 span标签 em标签等，我们可以通过一个案例来看看：

<div>
        <span>width</span>
        <em>height</em>
    </div>

 div {
            height: 100px;
            border: 3px solid #000;
            padding: 20px 15px;
        }
        
        div span,
        div em {
            width: 100px;
            border: 1px solid #ccc;
        }

设置了宽度，但是没有什么变化；

解决方案：
可以通过display将行内元素变成块元素(block)，但是不推荐这样做，因为每一个标签应该有每一个标签对应的用法：