使用CSS解决页面高度塌陷问题_css 布局塌陷-CSDN博客

本文链接：https://blog.csdn.net/qq_42179997/article/details/106791976

问题描述

父元素如果没有设置高度，那么父元素默认是被子元素撑开的，当子元素设置浮动后，子元素会脱离文档流，父元素不被子元素撑开，就会出现父元素的高度塌陷问题；

父元素的高度塌陷问题会影响到其他元素的布局；
高度塌陷问题是浮动布局中比较常见的问题，我们需要处理

<head>
    <style>
        .outter {
            border: 10px green solid;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: #BBFFAA;
			float: left;
        }
    </style>
</head>
<body>
    <div class="outter">
        <div class="inner"></div>
    </div>
</body>

在这里插入图片描述
上面的代码效果如图，子元素因为设置了浮动，从而脱离了文档流，父元素将不被子元素撑开，从而父元素内容区的高度为0，解决这个问题，可以通过开启父元素的BFC，或者通过clear属性解决

解决方法

开启BFC解决

开启父元素的BFC，可以解决父元素因为子元素设置浮动而导致父元素无法被撑开的问题

开启BFC的方法有很多

1. 设置元素的浮动`float`
2. 将元素设置为行内快元素 `display: inline-block`
3. 设置元素的 `overfloat `值为非visible值（常用`overflow: hidden`） 
   等等......

以下代码通过开启父元素的BFC来解决父元素高度塌陷的问题（本例通过overflow: hidden;来开启父元素的BFC）

<head>
    <style>
        .outter {
            border: 10px green solid;
			/* 使用 overflow 开启BFC*/
			overflow: hidden;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: #BBFFAA;
			float: left;
        }
    </style>
</head>
<body>
    <div class="outter">
        <div class="inner"></div>
    </div>
</body>

在这里插入图片描述

使用clear属性解决

思路：

既然clear属性可以清除浮动元素对其的影响，可以直接往高度塌陷的父元素的最后，添加一个空白的div，此时div实际上是被浮动元素覆盖的，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后对其设置clear属性，浏览器会自动为div添加一个上外边距，使其不被浮动元素覆盖，由于div被添加了一个上边距，所以父元素也被其撑开了，解决了高度塌陷的问题

<head>
    <style>
        .outter {
            border: 10px green solid;
        }
        .inner {
            width: 100px; height: 100px; background-color: #BBFFAA; float: left;
        }
		.clear {
			/* clear: both;清除浮动元素对此元素的影响，进而解决父元素的高度塌陷 */
			clear: both;
		}
    </style>
</head>
<body>
    <div class="outter">
        <div class="inner"></div>
		<!-- 添加的一个空div，设置clear属性解决高度塌陷 -->
		<div class="clear"></div>
    </div>
</body>

在这里插入图片描述

使用clear属性解决（最终版）

为了解决高度塌陷问题，我们添加了一个空的div元素，并且设置了其css属性，虽然解决了问题，但是div是一个html元素，html只负责页面的框架，最好可以不显式添加div元素来解决问题。

所以我们可以使用伪元素选择器::after选中父元素的最后的位置，为其添加空内容，并且设置display: blob来通过CSS的方式为父元素最后添加一个空的块元素，这样我们以同样的思路，通过CSS的方式解决问题。

<head>
    <style>
        .outter {
            border: 10px green solid;
        }
        .inner {
            width: 100px; height: 100px; background-color: #BBFFAA; float: left;
        }
		/* HTML负责结构，通过使用添加空白div虽然可以解决高度塌陷的问题，但是不太合适，通过CSS解决更为合适 */
		.outter::after {
			content: '';
			/* ::after默认添加的是一个行内元素，手动将其设置为块元素 */
			display: block;
			clear: both;
		}
    </style>
</head>
<body>
    <div class="outter">
        <div class="inner"></div>
    </div>
</body>

在这里插入图片描述

`clearfix`类解决高度塌陷（推荐）

下面是更为通用的CSS代码解决高度塌陷问题，不仅可以解决高度塌陷的问题，也可以解决外边距重叠的问题

实际情况复杂，不一定是要在元素的开始位置添加元素，也可能需要在元素的结束位置添加元素来解决问题，所以更为通用的代码，可以选择元素的开始位置和结束位置，对元素的开始位置和结束位置都添加空元素来解决问题

通过对元素的开始或结束位置添加元素，并且对元素属性设置为display: table;不仅可以解决高度塌陷的问题，也可以解决外边距重叠的问题，所以下面的代码更为通用，可以解决高度塌陷的问题和外边距重叠问题

下面的代码是一个类选择器与伪元素选择器，选中clearfix类的元素的开始和结束位置

在需要解决高度塌陷的问题或外边距重叠问题时，只需要在元素的类添加clearfix类即可

.clearfix::after,
.clearfix::before{
	content: '';
    /* display: table;用来解决 高度塌陷的问题、外边距重叠问题，在解决外边距重叠问题上，
       display: blob不行，只能使用table，所以使用display: table */
	display: table;	
    /* clear: both;解决高度塌陷的问题 */
	clear: both;
}