关于float导致父级元素高度坍塌问题

原创已于 2022-08-26 09:25:55 修改 · 205 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #html

于 2022-08-26 00:13:51 首次发布

html+css 专栏收录该内容

2 篇文章

订阅专栏

关于float导致父级元素高度坍塌问题

一. 问题描述

文档流父元素的高度默认是被子元素撑开的，
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
将会无法撑起父元素的高度，导致父元素的高度丢失

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
	body {
	   width: 350px;
	   text-align: center;
	}
	.box1 {
		border: 10px solid darkgray;
	}
	.box2 {
	  	width: 100px;
	  	height: 100px;
	  	background-color: aqua;
	}
	.box3 {
	  	height: 100px;
	  	background-color: green;
	}	
</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
	<div class="box3"></div>
</body>
</html>

Alt

// 当给box2添加浮动后，box2无法撑起box1的高度，导致box1高度坍塌
	.box2 {
		float: left;
	}

Alt=这是一张图片

二. 基础知识

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

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

    - 可以通过一些特殊方式来开启元素的BFC：
        1、设置元素的浮动（不推荐）
        2、将元素设置为行内块元素（不推荐）
        3. 将元素设置为绝对定位, positation: absolute
        4、将元素的overflow设置为一个非visible的值
            - 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素

三. 解决方法

	.box1 {
	// 方法一：设置父元素高度
		height: 100px;
	// 方法二 ~ 四：给父元素开启BFC
		/*float: left;*/	// 方法二：副作用：box1失去宽度，box1 box2都不占文档流高度，导致box3上移
		/*position: absolute;*/	// 方法三：副作用：同方法二
		/*display: inline-block;*/	// 方法四：副作用：box1失去宽度，且因inline-block布局给box1和box3带来间隙
    	/*overflow: hidden;*/	// 方法五：在以上方法中，副作用相对最小
    }

在这里插入图片描述

// 方法六：用别的子元素将box1高度撑起来，设置了清除浮动（clear: both）的元素，不会跟浮动元素位置重合，也就是通过.clear这个元素，将box1的高度撑起来了
// 副作用：增加了额外的元素
	.clear {
		clear: both;
	}

<div class="box1">
	<div class="box2"></div>
	<div class="clear"></div>
</div>
<div class="box3"></div>

// 方法七(最优雅的办法), 将方法六中增加的.clear元素, 替换成伪元素
	.clearfix::after {
		content: '';
		display: block;
		clear: both;
	}

<div class="box1 clearfix">
	<div class="box2"></div>
</div>
<div class="box3"></div>

在这里插入图片描述