解決網頁前端高度塌陷問題

網頁效果
在這裏插入圖片描述
css代碼:

.div1{
	width: auto;
	height: auto;
	background-color: #ccc;
	border: 1px solid red;
}
.clearfox{
	display: inline-block;
	_height: 1%;
}
.clearfox:after{
	content: "ss";
	clear: both;
	display: block;
	visibility: hidden;
	font-size: 0;
	height: 0;
}
.div2{
	width: 200px;
	height: 100px;
	float: left;
	background-color: aqua;
}

網頁前端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>選擇器優先級問題</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
	<div class="div1 clearfox">
		<div class="div2">	
		</div>
	</div>
	</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章