子元素浮动,父元素高度发生塌陷

最新推荐文章于 2022-08-25 19:12:36 发布

古塔前端

最新推荐文章于 2022-08-25 19:12:36 发布

阅读量576

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45321331/article/details/109720836

版权

css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

子盒子高度于父盒子高度的关系

子盒子影响父盒子的高度
浮动的盒子不会撑开父盒子的高度
解决方案
- 方法1:
- 方法2:

子盒子影响父盒子的高度

在开发过程中,由于不方便给父元素高度,导致父元素没有高度,但是可以通过给子元素高度,从而子元素高度撑开父盒子的高度,也让父盒子有了高度,这样父盒子的高度就会自适应。
案列

案例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            background-color: green;
        }
        
        .son {
            width: 100px;
            height: 100px;
            margin: 30px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <!-- 父盒子 -->
    <div class="father">
        <!-- 子盒子 -->
        <div class="son"></div>
    </div>
</body>

</html>

案列介绍
有一个绿色盒子(父盒子)没有高度,而它的子盒子(紫色盒子)有高度,子盒子的高度撑开了父盒子
效果

浮动的盒子不会撑开父盒子的高度

开发过程中,经常会用到浮动,但是浮动也有自己本身的特性,其中就有一种特性,当子元素浮动时，父盒子没有高度,这样子元素不会撑开父盒子的高度,父盒子高度为0。
案例

案例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            background-color: green;
        }
        
        .son {
            float: left;
            width: 100px;
            height: 100px;
            margin: 30px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <!-- 父盒子 -->
    <div class="father">
        <!-- 子盒子 -->
        <div class="son"></div>
    </div>
</body>

</html>

案例介绍
父盒子没有高度,子元素有高度，但是浮动了起来，按道理来讲，父盒子也会有高度，因问子盒子的高度撑开了父盒子，从而父盒子有了高度，但是当子盒子浮动起来时，父盒子就没有高度了。
效果

解决方案

方法1:

在父盒子里面,添加一个空的元素,然后清除浮动(clear: both;),这样父盒子就会有高度了

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            background-color: green;
        }
        
        .son1 {
            float: left;
            color: blue;
            width: 100px;
            height: 100px;
            margin: 30px;
            background-color: purple;
        }
        /* 我做了一件事情，清除浮动*/
        .son2 {
            clear: both;
        }
    </style>
</head>

<body>
    <!-- 父盒子 -->
    <div class="father">
        <!-- 子盒子1 -->
        <div class="son1"></div>
        <!-- 子盒子二 -->
        <div class="son2"></div>
    </div>
</body>

</html>

实现效果:

方法2:

给父元素添加溢出隐藏属性overflow:hidden，这样也可以让子元素有浮动,从而撑开父盒子的高度.

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            background-color: green;
            /*给父元素添加溢出隐藏属性*/
            overflow: hidden;
        }
        
        .son1 {
            float: left;
            color: blue;
            width: 100px;
            height: 100px;
            margin: 30px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <!-- 父盒子 -->
    <div class="father">
        <!-- 子盒子 -->
        <div class="son1"></div>

    </div>
</body>

</html>

实现效果:

古塔前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
子元素浮动,父元素高度发生塌陷

子盒子高度于父盒子高度的关系子盒子影响父盒子的高度浮动的盒子不会撑开父盒子的高度解决方案方法1:方法2:子盒子影响父盒子的高度在开发过程中,由于不方便给父元素高度,导致父元素没有高度,但是可以通过给子元素高度,从而子元素高度撑开父盒子的高度,也让父盒子有了高度,这样父盒子的高度就会自适应。案列案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫