解决高度坍塌方法

march on_6

于 2021-12-02 22:23:29 发布

阅读量134

点赞数 1

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/yyh619/article/details/121687140

版权

清除浮动

根源：

常规流盒子的自动高度在计算时不会考虑浮动盒子，父元素未定高度，内部元素浮动或定位（除相对定位），导致其脱离文档流，使父元素无法适应其高度，从而造成高度坍塌。

解决方式：

方法一

给父元素添加高度，并确保子元素高度和小于它。

<!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>
</head>
<style>
    .parent{
        height: 300px;
        background-color: blueviolet;
    }

    .kid{
        height: 300px;
        float: left;
        width: 300px;
        background-color: cadetblue;
        border: 1px solid black;
        box-sizing: border-box;
    }


</style>
<body>
    <div class="parent">
    <div class="kid"></div>
    <div class="kid"></div>
    </div>
</body>
</html>

方法二

在盒子结尾加上clear属性，清除浮动。

引入——css属性：clear

- 默认值：none

- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方

- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方

- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

<!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>
</head>
<style>
    .parent{
        background-color: blueviolet;
    }

    .kid{
        height: 300px;
        float: left;
        width: 300px;
        background-color: cadetblue;
        border: 1px solid black;
        box-sizing: border-box;
    }

    .clear{
        clear: both;
    }


</style>
<body>
    <div class="parent">
    <div class="kid"></div>
    <div class="kid"></div>
    <div class="clear"></div>
    </div>
</body>
</html>

方法三

使用after伪元素选择器，并给父元素加上clearfix的类名。

CSS样式：.clearfix::after{

content:""

display:block;

clear:both;

}

父元素引用：class="clearfix"

<!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>
</head>
<style>   
   .clearfix::after{
        content:"";
        display:block;
        clear:both;
    }

    .parent{
        background-color: blueviolet;
    }

    .kid{
        height: 300px;
        float: left;
        width: 300px;
        background-color: cadetblue;
        border: 1px solid black;
        box-sizing: border-box;
    }
</style>
<body>
    <div class="parent clearfix">
    <div class="kid"></div>
    <div class="kid"></div>
    </div>
</body>
</html>

方法四

给父元素添加overflow样式来触发BFC，从而解决高度坍塌。

引入——BFC-块级格式化上下文：决定了元素如何对其上下文内容进行定位。

触发BFC后元素特征：

1.父元素的外边距不会和子元素重叠；
2.开启BFC的元素不会被浮动元素所覆盖；
3.子元素垂直方向不会再margin重叠。

理解：这里只是利用该属性撑起父元素的高度，并没将元素清除，当overflow值不为visible时，从而触发BFC，清除浮动。

<!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>
</head>
<style>   
    .parent{
        background-color: blueviolet;
        overflow: hidden;
    }

    .kid{
        height: 300px;
        float: left;
        width: 300px;
        background-color: cadetblue;
        border: 1px solid black;
        box-sizing: border-box;
    }
</style>
<body>
    <div class="parent">
    <div class="kid"></div>
    <div class="kid"></div>
    </div>
</body>
</html>

欢迎补充！

march on_6

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
解决高度坍塌方法

清除浮动根源：常规流盒子的自动高度在计算时不会考虑浮动盒子，父元素未定高度，内部元素浮动或定位（除相对定位），导致其脱离文档流，使父元素无法适应其高度，从而造成高度坍塌。解决方式：方法一给父元素添加高度，并确保子元素高度和小于它。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-
复制链接

扫一扫