高度塌陷？如何清除浮动？

嘿！呆桃日记～

已于 2022-07-21 16:03:07 修改

阅读量174

点赞数

文章标签：前端 html

于 2022-07-21 13:48:01 首次发布

本文链接：https://blog.csdn.net/m0_53456432/article/details/125909586

版权

1、高度塌陷

2、为什么清除浮动

3、如何清除浮动

1、高度塌陷

高度塌陷简单说就是，府级元素包涵的子元素浮动了，当父级元素没有设置高度时，会因为没有子元素“撑开”，而变成一条线。

2、为什么清除浮动

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。

3、如何清除浮动？

给父元素设置overflow:hidden
额外标签法（隔墙法）：在子元素后边设置用一个空元素，设置一个clear:both属性
双伪元素法

伪元素法：

<style>
        .a{
            width: 200px;
            background-color: red;
        }
        .b{
            height: 100px;
            width: 100px;
            background-color: pink;
        }
      .a:after{//伪元素
        content: "";
        height: 0px;
        display: block;
        overflow: hidden;
        visibility: hidden;
      }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
        </div>
    </div>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

嘿！呆桃日记～

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高度塌陷？如何清除浮动？

高度塌陷简单说就是，府级元素包涵的子元素浮动了，当父级元素没有设置高度时，会因为没有子元素“撑开”，而变成一条线。清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。......
复制链接

扫一扫