CSS高度塌陷相关问题和解决方法

最新推荐文章于 2023-07-14 08:00:00 发布

mmongin

最新推荐文章于 2023-07-14 08:00:00 发布

阅读量180

点赞数

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45790634/article/details/107011542

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

高度塌陷问题

在浮动布局中，父元素的高度默认是被子元素撑开的,当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离,将会无法撑起父元素的高度，导致父元素的高度丢失，父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！
解决办法1：BFC
解决办法2：clearfix

BFC

BFC(Block Formatting Context) 块级格式化环境
BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC,开启BFC该元素会变成一个独立的布局区域元素开启BFC后的特点：
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素子元素和父元素外边距不会重叠
- 开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式来开启元素的BFC：
- 设置元素的浮动（不推荐）
- 将元素设置为行内块元素（不推荐）
- 将元素的overflow设置为一个非visible的值
  - 常用的方式为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .outer{
            border: 10px red solid;
             float: left;
             display: inline-block;
             overflow: hidden;
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
    </style>
</head>
<body>

    <div class="outer">
        <div class="inner"></div>
    </div>
    <div style="width: 200px;height: 200px;background-color:yellow;"></div>
</body>
</html>

clear方法开启
- 由于box1的浮动，导致box3位置上移,也就是box3收到了box1浮动的影响，位置发生了改变,如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响
- 作用：清除浮动元素对当前元素所产生的影响
- 可选值：
  - left 清除左侧浮动元素对当前元素的影响
  - right 清除右侧浮动元素对当前元素的影
  - both 清除两侧中最大影响的那侧
- 原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。
- 最终解决方案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
<!--        clear 只针对浮动-->
        .box1{
            border: 10px red solid;

            /* overflow: hidden; */
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }

        .box3{
            clear: both;
        }

        .box1::after{
            content: '';
            clear: both;
            display: block;
        }
        
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
        <!-- <div class="box3"></div> -->
    </div>
    
</body>
</html>

clearfix
- 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可
```
.clearfix::before,
.clearfix::after{
       context:'';
       display:table;
       clear:both;
  }
```
浮动总结：
通过浮动可以设置一些水平方向的布局
浮动可能会有高度塌陷的问题。
解决方法：
- 通过开启BFC来进行解决
- 设置clear
- 设置clearfix属性

mmongin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS高度塌陷相关问题和解决方法

高度塌陷问题在浮动布局中，父元素的高度默认是被子元素撑开的,当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离,将会无法撑起父元素的高度，导致父元素的高度丢失，父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！解决办法1：BFC解决办法2：clearfixBFCBFC(Block Formatting Context) 块级格式化环境BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC,开启
复制链接

扫一扫