高度塌陷和BFC、clear属性、解决高度塌陷问题、clearfix

最新推荐文章于 2022-11-15 19:08:40 发布

Massimo_ycw

最新推荐文章于 2022-11-15 19:08:40 发布

阅读量440

点赞数

分类专栏： HTML 文章标签： css css3 html

本文链接：https://blog.csdn.net/Massimo__JAVA/article/details/127392064

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细探讨了BFC概念在防止高度塌陷中的应用，包括如何通过`overflow:hidden`开启元素BFC，以及clear属性的使用来清除浮动影响。还介绍了结构层面和表现层面的解决方案，如clearfix技术，帮助读者理解如何在浮动布局中保持元素间距和高度的正确显示。

摘要由CSDN通过智能技术生成

一、高度塌陷和BFC

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.outer{
				border: 10px red solid;
				/* 
				 BFC(Block Formatting Context) 块级格式化环境
				 BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
				 开启BFC该元素会变成一个独立的布局区域
				 元素开启BFC后的特点:
				 1.开启BFC的元素不会被浮动元素所覆盖
				 2.开启BFC的元素子元素和父元素外边距不会重叠
				 3.开启BFC的元素可以包含浮动的子元素
				 
				 可以通过一些特殊方式来开启元素的BFC: 
				 1、设置元素的浮动(不推荐)
				 2、将元素设置为行内块元素(不推荐)
				 3、将元素的overflow设置为一个非visible的值
				  - 常用的方式为元素设置overflow:hidden开启其BFC以使其可以包含浮动元素
				 */
				overflow: hidden;
			}
			.inner{
				width: 100px;
				height: 100px;
				background-color: #BBFFAA;
				/* 
				 高度塌陷的问题: 
				 在浮动布局中，父元素的高度默认是被子元素撑开的，
				 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
				 将会无法撑起父元素的高度，导致父元素的高度丢失
				 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
				 所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理!
				 */
				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>

二、clear属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				font-size: 50px;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #BBFFAA;
				float: left;
			}
			.box2{
				width: 400px;
				height: 150px;
				background-color: yellow;
				float: right;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: orange;
				/* 
				 由于box1的浮动，导致box3位置上移
				 也就是box3收到了box1浮动的影响，位置发生了改变
				 如果我们不希望某个元素因为其他元素浮动的影响而改变位置，
				 可以通过clear属性来清除浮动元素对当前元素所产生的影
				 
				 clear 
				 作用:清除浮动元素对当前元素所产生的影响
				 可选值:
				 left清除左侧浮动元素对当前元素的影响
				 right清除右侧浮动元素对当前元素的影响
				 both清除两侧中最大影响的那侧
				 
				 原理:
				 设置清除浮动以后，浏览器会自动为元素添加一个上外边距
				 以使其位置不受其他元素的影响
				 */
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</body>
</html>

三、解决高度塌陷问题

3.1、结构层面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				border: 10px red solid;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: #BBFFAA;
				float: left;
			}
			.box3{
				/* 
				高度塌陷属于表现方面的问题，所以我们希望通过
				表现层面来解决，即通过css来解决，而不是通过这种
				结构层面解决
				*/
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>

3.2、表现层面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				border: 10px red solid;
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: #BBFFAA;
				float: left;
			}
			.box1::after{
				content: '';
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

四、clearfix

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 200px;
				height: 200px;
				background-color: #BBFFAA;
			}
			/* .box1::before{
				content: '';
				display: table;
			} */
			.box2{
				width: 100px;
				height: 100px;
				background-color: orange;
				margin-top: 100px;
			}
			
			/*
			 clearfix这个样式可以同时解决高度塌陷和外边距重叠问题，
			 当遇到这些问题时，直接使用clearfix即可
			 */
			.clearfix::before,
			.clearfix::after{
				content: '';
				display: table;
				clear: both;
			}
			
		</style>
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="box2"></div>
		</div>
	</body>
</html>