HTML+CSS基础(解决高度塌陷问题)

2021-12-04 22:58:01 阅读：180 来源： 互联网

标签：color 元素 100px height 塌陷 HTML background CSS left

元素脱离文档流导致的高度塌陷问题

1.问题描述：
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">     
        .box1{
            border: 10px red solid;
        }

        .box2{
            background-color: yellow;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

元素脱离文档流的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">     
        .box1{
            border: 10px red solid;
        }

        .box2{
            background-color: yellow;
            width: 100px;
            height: 100px;
            /* float: left; */
        }
        .box3{
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

想要这样的效果.png

设置浮动之后（高度塌陷问题）.png

由于父元素的高度塌陷，则父元素的所有元素都会向上移动，这样会导致页面布局混乱，所以在开发中一定要避免出现高度塌陷问题

2.问题解决一：
根据W3C标准，在页面中元素都有一个隐藏的属性叫Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

当开启BFC后，元素将会具有以下特性：

元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动元素

如何开启BFC：

1)设置元素的浮动(虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下边的元素上移，不能解决问题)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
/非父元素设置浮动/
float: left;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>


  ![给父元素设置浮动的结果.png](http://upload-images.jianshu.io/upload_images/3063110-e3f921af945a6f10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

+ 2)设置元素的绝对定位（和1效果差不多，不推荐）
+ 3)设置元素的inline-block（父元素的宽度又没了，不推荐使用）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
display: inline-block;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>


  ![第三种方式的效果图.png](http://upload-images.jianshu.io/upload_images/3063110-39b189264d80ed92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

+ 4)将元素的overflow设置为一个非visible的值（推荐这种方式开启BFC，副作用小，IE6及以下不支持，此时可以使用hasLayout,给父元素设置```zoom:1```,此处不赘述）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
overflow: hidden;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>


  ![overflow为hidden.png](http://upload-images.jianshu.io/upload_images/3063110-ed5337266a7dad7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


******
> ***3.问题解决二：***
clear属性可以用于清除元素周围的浮动对元素的影响。也就是元素不会因为上方出现了浮动元素而改变位置。

+ 可选值：
    - left ：忽略左侧浮动 （清除左侧浮动对当前元素的影响）

    - right ：忽略右侧浮动 （清除右侧浮动对当前元素的影响）

    - both ：忽略全部浮动 （清除两侧对他影响最大的浮动对）

    - none ：不忽略浮动，默认值

/通过空白撑开父元素，清除浮动，基本没有副作用，可以兼容各种浏览器/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
clear: left;
}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }
    .clear{
        clear: left;
    }
    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
<div class="box3"></div>
</body>
</html>


![clear.png](http://upload-images.jianshu.io/upload_images/3063110-adcdc009e889bc38.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

******
> ***4.问题解决三：***通过after伪类，和添加div效果一样，而且不会再页面中添加div，最推荐的方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style type="text/css">
.box1{
border: 10px red solid;
clear: left;
}

    /* 通过after伪类来选择box1的后面 */
    .clearfix:after{
        /* 必须设置一个空的congtent,否则不起作用  */ 
        content: "";
        /* 转换成块元素  */
        display: block;
        clear: both;
    }
    /*为了兼容IE6*/
    .clearfix{zoom:1}

    .box2{
        background-color: yellow;
        width: 100px;
        height: 100px;
        float: left; 
    }

    .box3{
        height: 100px;
        background-color: green;
    }
</style>

</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

作者：槑如是
链接：https://www.jianshu.com/p/f09f40591d97
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

标签：color,元素,100px,height,塌陷,HTML,background,CSS,left
来源： https://blog.csdn.net/qq_40229790/article/details/121723332

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML+CSS基础(解决高度塌陷问题)

元素脱离文档流导致的高度塌陷问题