html 高度塌陷 BFC

最新推荐文章于 2024-07-24 16:53:23 发布

WenbinYao&YouweiHu

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量152

点赞数

分类专栏： html/css 文章标签： html css

本文链接：https://blog.csdn.net/qq_39805362/article/details/112263032

版权

html/css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在进行布局时，一般需要设置外面的布局框可以根据里面的内容自适应高度，只要不指定外部布局框的高度那么便可以使得外部的布局框根据内容自适应高度，即被内容撑开。
但是当内部元素需要浮动时，便会出现高度塌陷的问题，如下图所示：
在这里插入图片描述
红色的就是外面的边框，橘黄色的是内部的元素，灰色的元素是外部边框下面的一个元素。当给橘黄色的box设置为float:left之后，则该box便脱离的文档流，但是其他两个元素依然在文档流中，因此橘黄色的box的父元素高度便塌陷了，而下面那个灰色box则顶住了红色的border，处于浮动元素的下面。
解决高度塌陷问题需要设置父元素（外部元素）的BFC属性，BFC是一个隐藏属性，全称为块级格式化环境，开启BFC该元素会变成一个独立的布局区域。元素开启BFC后则1.它不会被浮动元素所覆盖，2.它的子元素和父元素外边距不会重叠，3.它可以包含浮动的子元素。
开启BFC的方式有多种：包括1.设置元素为浮动；2.将元素设置为行内块元素；3.将元素的overflow设置为一个非visible的值。建议使用第3种方式。
设置父元素的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>
    <style>
        .outer{
            width: 300px;
            /* height: 300px; */
            background-color: #bfa;
            border: red;
            border-style: solid;
            /* 开启BFC属性 */
            overflow: hidden;  
            
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: orange;
            float:left;

        }
        .below{
            width: 200px;
            height: 200px;
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="below"></div>
</body>
</html>

除了上面说的开启BFC的方式还可以有下列方式：
在这里插入图片描述
设置clear
除了上述的方式，还有一个推荐的方式是设置clear属性来清除浮动的影响。clear本质是浏览器自动计算出了margin，然后给补上这个margin，外观看到就好像清除了float的影响。clear的可选值有left,right,both，其中both是清除两者中较大的影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决高度塌陷BFC</title>
    <style>
        .outer{
            width: 300px;
            /* height: 300px; */
            background-color: #bfa;
            border: red;
            border-style: solid;
            /* 开启BFC */
            /* overflow: hidden; */
                
        }
        /* 解决高度塌陷问题 */
        /* In CSS, ::after creates a pseudo-element that is the last child of the selected element.  */
        .outer::after {
            content: '利用伪元素和clear解决高度塌陷问题';
            /* 默认是内联元素，无法解决塌陷问题，因此设置成块元素 */
            display: block ;
            clear: both ;
        
            
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: orange;
            float:left;

        }

        .below{
            width: 200px;
            height: 200px;
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="below"></div>
</body>
</html>

解决和父元素的垂直方向外边距重叠与高度塌陷问题
最后，除了高度塌陷，还有一个与父元素的垂直方向出现外边距重叠的问题，这也是常常要解决的问题，解决手段就是给父元素设置下述代码，即在父元素标签里写上clearfix：

<style>
	.clearfix::before,
	.clearfix::after{
		content:'';
		display:table;
		clear:both;
	}
</style>

这段代码能解决问题的原因就是：首先用after伪元素在子元素后面加了一个清除浮动的table元素，由于清除了浮动，因此不会受浮动影响，可以保持位置在子元素下面，然后这个元素就顶着父元素，使父元素高度不会塌陷。之后再使用before伪元素在子元素的上面设置一个伪元素，这个伪元素设置为table，起到了阻隔父元素和子元素外边距的作用，这样一来相邻父子元素外边距重叠的效应就消失了，于是便解决了高度塌陷和外边距重叠两个问题。

WenbinYao&YouweiHu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 高度塌陷 BFC

在进行布局时，一般需要设置外面的布局框可以根据里面的内容自适应高度，只要不指定外部布局框的高度那么便可以使得外部的布局框根据内容自适应高度，即被内容撑开。但是当内部元素需要浮动时，便会出现高度塌陷的问题，如下图所示：红色的就是外面的边框，橘黄色的是内部的元素，灰色的元素是外部边框下面的一个元素。解决高度塌陷问题需要设置父元素（外部元素）的BFC属性，BFC是一个隐藏属性，全称为块级格式化环境，开启BFC该元素会变成一个独立的布局区域。元素开启BFC后则它不会被浮动元素所覆盖，它的子元素和父元素外边距
复制链接

扫一扫

专栏目录