signed

QiShunwang

“诚信为本、客户至上”

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

2021/4/26 23:12:30   来源:

我在学习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),但是不推荐这样做,因为每一个标签应该有每一个标签对应的用法: