前端学习笔记47-高度塌陷和BFC

2021-05-03 13:01:48 阅读：155 来源： 互联网

前端学习笔记47-高度塌陷和BFC

高度塌陷
BFC

浮动本来是用来设置文字环绕的，但是从前面学的可以看到，我们拿浮动来设置布局。这看着很爽，但是也是有一些问题的。

高度塌陷

拿上一个举例，我们把中间的main的高度写死了，还把它的三个子元素的高度写死。但是实际中很多都是没写死的，这样的话如果内容太少或者太多，就不一定会有下图的效果出来。
因此，我们不能把父元素main的大小写死，而是要让他根据子元素来变化。
在这里插入图片描述
如下面代码，outer的高度没有设置，而是由inner的高度撑开。

<!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;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

在这里插入图片描述
如果我们此时想给outer水平排好几个inner，就需要给inner设置浮动，

        .inner{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }

在这里插入图片描述
？？？啥情况
子元素浮动，从文档流脱离了，子元素的高度不再撑开父元素的高度，这就是高度塌陷。
高度塌陷的问题主要不在于影响自己和父元素，它的主要问题是会影响其他的元素。
看代码

<!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;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div style="width: 100px;height: 100px;background-color: yellow;"></div>
</body>
</html>

在这里插入图片描述
如果没浮动，则黄色的div是在outer垂直下方的，但是inner设置浮动了，outer高度塌陷导致黄色的div也就上去了，这就重叠了。

如果想解决这个问题，很容易想到的就是写死outer的高度，但是这样的话如果子元素内容少，则outer里面的内容就稀疏了，很难看，所以不行。
所以得用BFC来解决问题。

BFC

BFC是块级格式化环境，是CSS的隐含属性。
开启BFC后，元素变成了一个独立的布局区域。
特点：
1、不会被浮动元素所覆盖
2、子元素和父元素外边距不会重叠
3、可以包含浮动的子元素

这里我们用第三个特点来解决问题。

开启BFC的一个特殊方法是设置元素的浮动。
在这里就是给outer设置浮动。

        .outer{
            float: left;
            border: 10px red solid;
        }

在这里插入图片描述
虽说没有塌陷，但是那个黄色div还是重叠了，且宽度和高度变了。

第二中开启BFC的方法是将元素设置为行内块元素。

        .outer{
            display: inline-block;
            border: 10px red solid;
        }

在这里插入图片描述
虽然好了点，但是宽度还是改变了，不大行。

第三种开启BFC的方法是将元素的overflow设置为非visible的值。(笔记37里有讲overflow)

        .outer{
            overflow: auto;
            border: 10px red solid;
        }

或

        .outer{
            overflow: hidden;
            border: 10px red solid;
        }

在这里插入图片描述
比前两种方法好多了。

标签：BFC,浮动,outer,47,元素,高度,塌陷,inner
来源： https://blog.csdn.net/weixin_45034895/article/details/116375681

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

ICode9

前端学习笔记47-高度塌陷和BFC

前端学习笔记47-高度塌陷和BFC

高度塌陷

BFC