前端学习笔记 - CSS - 5.高度塌陷

当父元素的高度由子元素的高度撑起时,子元素浮动后,父元素发生高度塌陷。

<style type="text/css">
	
	.parent{
		border: 10px red solid;
	}
	
	.son{
		width: 100px;
		height: 100px;
		background-color: pink;
		float: left;
	}

</style>
<body>

	<div class="parent">
	
		<div class="son"></div>
	
	</div>
	
</body>

1.未浮动时,父元素高度由子元素撑起。
前端学习笔记 - CSS - 5.高度塌陷_第1张图片
2.子元素浮动后,父元素发生高度塌陷。

前端学习笔记 - CSS - 5.高度塌陷_第2张图片

方案一:开启元素BFC(block formatting context:块级格式化上下文)(不推荐)

  • BFC是css的隐藏属性,开启后,元素将变为独立的布局区域。特点如下:
  1. 开启BFC的元素不会被浮动元素覆盖
  2. 开启BFC的元素子元素和父元素边框不会重叠
  3. 开启BFC的元素可以包含浮动的子元素
/* 1.浮动*/
.parent{
	/* 添加属性 */
	float: left;
}
/* 2.行内块元素*/
.parent{
	/* 添加属性 */
	display: inline-block;
}
/* 3.overflow:非visible*/
.parent{
	/* 添加属性, 常用hidden*/
	overflow: hidden;
}

方案二:使用clear属性清除浮动元素的影响(推荐)

1. 在子元素后面添加一个标签,并将其用clear属性清除浮动,以此将父元素高度撑起

<body>

	<div class="parent">
	
		<div class="son"></div>
		
		<div class="brother"></div>
		
	</div>
	
</body>
.brother{
	clear: both;
}

2. 利用伪元素 ::after ,并将其利用clear属性清除浮动,即撑起了高度,也避免了在html中添加标签

.parent::after{
	content: "";  /* ::after需要设置内容才能显示,设置为空串不影响布局 */
	display: block;  /* ::after为行内元素,需要转换为块元素*/
	clear: both;  /* 清除浮动影响 */
}

你可能感兴趣的:(前端,css)