CSS解决高度塌缩问题和外边距重叠问题

最新推荐文章于 2023-05-23 17:39:24 发布

Recyclable brother

最新推荐文章于 2023-05-23 17:39:24 发布

阅读量564

点赞数

分类专栏：前端学习文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_46837674/article/details/114293035

版权

高度塌陷的问题

在浮动布局中，父元素默认是被子元素撑开的
	当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
	将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失后，其下的元素会自动上移，导致页面布局混乱
所以高度塌陷是比较常见的问题，这个问题必须处理

<!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>
    <style>
        .outer{
   
            border: 10px red solid;
        }
        /* outer不设置宽高，宽高由inner撑开 */
        .inner{
   
            width: 100px;
            height: 100px;
            background-color: sandybrown;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

如程序中体现，我们给outer设置了一个边框，但是不设置宽高，此时，outer的宽高将由inner的宽高撑开。
显示如图：
在这里插入图片描述
当我们设置inner左浮动时，就会出现高度坍缩的问题；

        .inner{
   
            width: 100px;
            height: 100px;
            background-color: sandybrown;
            /*设置左浮动*/
            float: left;
        }

显示如图：
在这里插入图片描述
子元素无法撑开父元素，导致父元素上移，页面布局混乱；
解决高度坍缩有很多种解决方案，但或多或少都会存在一定缺陷：
Ⅰ–使用BFC解决：
BFC（Block Formatting Context）块级格式化环境
BFC是CSS中的一个隐藏属性，可以为一个元素开启BFC；
开启BFC该元素就是一个独立布局区域
元素开启BFC后的特点：
1.开启BFC的元素不会被浮动元素覆盖
2.开启BFC的元素子元素和父元素的外边距不会重叠
3.开启BFC的元素可以包含浮动的元素
需要通过一些特殊方式开启元素BFC：
1.设置元素的浮动（不推荐）
2.将元素设置为行内块元素（不推荐）
3.将元素overflow设置为一个非visible的值
常见方式为元素设置overflow：hidden 开启其BFC，以使其可以包含浮动的元素

        .outer{
   
            border: 10px red solid;
            <

最低0.47元/天解锁文章

Recyclable brother

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS解决高度塌缩问题和外边距重叠问题

高度塌陷的问题在浮动布局中，父元素默认是被子元素撑开的当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失父元素高度丢失后，其下的元素会自动上移，导致页面布局混乱所以高度塌陷是比较常见的问题，这个问题必须处理 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X
复制链接

扫一扫