前端的学习之路：初级CSS---高度塌陷和BFC

最新推荐文章于 2022-07-12 00:49:27 发布

new-SkyWaller

最新推荐文章于 2022-07-12 00:49:27 发布

阅读量156

点赞数

分类专栏：初级CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113704744

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

高度塌陷和BFC

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高度塌陷和BFC</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.21.03.css"> -->
    <style>
        .outer {
            border: 10px red solid;
            /*
             BFC(Blocl Formatting Content)块级格式化环境
                    -BFC是一个css中的 一个隐含的属性,可以为一个元素开启BFC
                        开启BFC该元素就会变成一个独立的布局区域
                    -元素开启BFC后的特点：
                        1、开启BFC的元素不会被浮动元素所覆盖
                        2、开启BFC的元素子元素和父元素外边距不会重叠
                        3、开启BFC的元素可以包含浮动的元素


                       -可以通过一些特殊方式来开启元素的BFC：
                            1、设置元素的浮动（不推荐）
                            2、将元素设置为行内块元素（不推荐）
                            3、将元素的overflow设置为一个非visible的值     
                                -常用的方式为元素设置 overflow：hidden 开启其BFC，以使其可以包含浮动元素
             */

            /* float: left; */
            /* display: inline-block; */
            overflow: hidden;

        }

        .inter {
            width: 100px;
            height: 100px;
            background-color: #bbffaa;

            /* 
            高度塌陷的问题：
                    在浮动布局中，父元素的高度默认是被子元素撑开的，
                      当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
                      将会无法撑起父元素的高度，导致父元素的高度丢失
                父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

                所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理      
             */
            float: left;

        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inter"></div>
    </div>
    <div style="width: 200px;height: 200px; background-color: royalblue;"></div>
<!-- 什么是高度塌陷？

    父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。

 

如何来解决高度塌陷？

方案一：给父元素一个固定的高度

    缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。

 

方案二：给父元素添加属性 overflow: hidden;

    优点：浏览器支持好，简单；

    缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。

 

方案三：在子元素的末尾添加一个空的 div ，并设置下方样式

div{
    clear: both;
    height: 0;
    overflow: hidden;
}
    优点：所有浏览器都支持，并且容器溢出不会被裁剪；

    缺点：在页面中添加无意义的div，容易造成代码冗余。

 

方案四：万能清除浮动法

    在父元素中内容的最后添加一个伪元素来实现第三种方案的功能，具体设置样式如下：

父元素:after{
    content: "";
    height: 0;
    clear: both;
    overflow: hidden;
    display: block;
    visibility: hidden;
}
    优点：不会造成代码冗余，剩余代码性能优化，推荐使用。 -->
</body>

</html>

运行结果为：
在这里插入图片描述

new-SkyWaller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的学习之路：初级CSS---高度塌陷和BFC

高度塌陷和BFC<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高度塌陷和BFC</title> <!-- <link rel="styleshe
复制链接

扫一扫