日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

CSS-解決因子元素浮動引起的父元素高度塌陷問題

作者：GingerCat637 更新時間： 2022-09-25 編程語言

前言

因子元素浮動后不再向父元素匯報高度，導致父元素在沒有設置高度的情況下會收縮消失，為了解決這個問題，特地記錄一下。

目的

解決父元素高度塌陷問題

思路一

clear屬性

這個屬性可以指定一個元素是否必須移動(清除浮動后)到在它之前的浮動元素下面

clear的常用取值

  • left：要求元素的頂部低于之前生成的所有左浮動元素的底部
  • right：要求元素的頂部低于之前生成的所有右浮動元素的底部
  • both：要求元素的頂部低于之前生成的所有浮動元素的底部
  • none：默認值，無特殊要求

需要結構與樣式分離

給父元素添加::after偽元素

思路二

觸發BFC

因為在BFC的高度是auto的情況下，是按照以下的方法計算高度的

  1. 如果只有inline-level，是行高的頂部和底部的距離
  2. 如果有block-level，是由最底層的塊上邊緣和最底層
    塊盒子的下邊緣之間的距離
  3. 如果有絕對定位元素，將被忽略
  4. 如果有浮動元素，那么會增加高度以包括這些浮動元
    素的下邊緣

方法一

添加clear-fix類到父元素上

.clear-fix::after {
	content: '';
	display: block;
	clear: both;

	visibility: hidden; /* 瀏覽器兼容性 */
	height: 0; /* 瀏覽器兼容性 */
}
.clear-fix {
	*zoom: 1; /* IE6/7兼容性 */
}

效果

添加浮動前

測試代碼

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.fbox {
				background-color: #f00;
			}
			.box {
				width: 100px;
				height: 100px;
				background-color: #0f0;
			}
		</style>
	</head>
	<body>
		<div class="fbox">
			<div class="box">我是box</div>
		</div>
	</body>
</html>

瀏覽器效果

在這里插入圖片描述

添加浮動后

測試代碼

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.fbox {
				background-color: #f00;
			}
			.box {
				width: 100px;
				height: 100px;
				background-color: #0f0;
				/* 添加浮動 */
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="fbox">
			<div class="box">我是box</div>
		</div>
	</body>
</html>

瀏覽器效果

在這里插入圖片描述

使用方法后

測試代碼

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.fbox {
				background-color: #f00;
			}
			.box {
				width: 100px;
				height: 100px;
				background-color: #0f0;
				/* 添加浮動 */
				float: left;
			}
			.clear-fix::after {
				content: '';
				display: block;
				clear: both;

				visibility: hidden; /* 瀏覽器兼容性 */
				height: 0; /* 瀏覽器兼容性 */
			}
			.clear-fix {
				*zoom: 1; /* IE6/7兼容性 */
			}
		</style>
	</head>
	<body>
		<div class="fbox clear-fix">
			<div class="box">我是box</div>
		</div>
	</body>
</html>

瀏覽器效果

在這里插入圖片描述

方法二

添加overflow: auto到父元素

測試代碼

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.fbox {
				background-color: #f00;
                /* 觸發BFC */
                overflow: auto;
			}
			.box {
				width: 100px;
				height: 100px;
				background-color: #0f0;
				/* 添加浮動 */
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="fbox clear-fix">
			<div class="box">我是box</div>
		</div>
	</body>
</html>

瀏覽器效果

在這里插入圖片描述

總結

兩種方法實現了結構與樣式分離，推薦使用

參考

coderwhy前端課講義

原文鏈接：https://blog.csdn.net/l_637/article/details/127003238

欄目分類
最近更新