前端布局02 高度塌陷问题

最新推荐文章于 2023-07-15 11:27:53 发布

weixin_44819723

最新推荐文章于 2023-07-15 11:27:53 发布

阅读量221

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_44819723/article/details/122678208

版权

高度塌陷的问题

在浮动布局中，父元素是被子元素撑开的
        当子元素浮动后，其会脱离文档流，子元素从文档流中脱离
        将会无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
所以高度塌陷问题需要处理。

通过给元素设置BFC可以处理高度塌陷问题

BFC(block formatting context)块级格式化环境
    -元素开启BFC的特点
        1.开启后元素不会被浮动元素覆盖
        2.开启BFC的元素子元素和父元素外边距不会重叠
        3.开启BFC的元素可以包含浮动的子元素
    -可以通过以下方法开启BFC
        1.设置元素浮动
        2.将元素设置为行内块元素disply:inline-block
        3.将元素的overflow设置为一个非visible的值  
            overflow: hidden;
            overflow: scroll;(带导航条)

<!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>高度塌陷问题</title>
    <style>
        .out{
            border:10px red solid;
            background-color: sandybrown;
            overflow: hidden;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: seagreen;
            float: left;
        }

    </style>
</head>
<body>
    <div class="out">
        <div class="inner"></div>
    </div>

    <div style="width: 150px;height:150px;background-color: rgb(138, 77, 25)"></div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-50fFxy7o-1643048895602)(C:\Users\xixi yiyi\AppData\Roaming\Typora\typora-user-images\1643048712767.png)]

在这里插入图片描述

weixin_44819723

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端布局02 高度塌陷问题

高度塌陷的问题在浮动布局中，父元素是被子元素撑开的当子元素浮动后，其会脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱所以高度塌陷问题需要处理。通过给元素设置BFC可以处理高度塌陷问题BFC(block formatting context)块级格式化环境 -元素开启BFC的特点 1.开启后元素不会被浮动元素覆盖 2.开启BFC
复制链接

扫一扫