css 浮动 float 03-高度塌陷问题

@Linnc

已于 2022-07-13 14:55:49 修改

阅读量133

点赞数

文章标签： css css3 html

于 2022-07-12 20:23:32 首次发布

本文链接：https://blog.csdn.net/weixin_56973829/article/details/125751031

版权

css 浮动 float 03-高度塌陷问题

1. 高度塌陷问题

我们经常不对父元素的高度进行设置，希望父元素的高度由内容撑开，也就是由它的子元素决其高度，当子元素开启浮动之后，则子元素脱离文档流无法继续撑开父元素，导致父元素的高度塌陷。

代码1：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>floatTest</title>
        <style>
            .outter{
     
                width: 400px;
                height: auto;
                border: solid black 2px;
            }

            .inner{
     
                width: 300px;
                height: 200px;
                background-color: blueviolet;
                /* float: left; */
            }
        </style>
    </head>

    <body>
        <div class="outter">
            <div class="inner