浮动6666

最新推荐文章于 2025-06-06 17:58:26 发布

2501_90793659

最新推荐文章于 2025-06-06 17:58:26 发布

阅读量89

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/2501_90793659/article/details/147386768

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			/* 传统的网页布局:标准流+浮动+定位
			标准流:按照标签的显示模式进行排列
			浮动float:左浮动left和右浮动right,能让块元素在一行内显示 
			*/
			.bigbox {
				width: 1000px;
				height: 500px;
				border: 1px solid magenta;
				margin: auto;

				/* overflow: hidden; */
				/* 给父元素添加双伪元素 */
				.clearfix:before,
				.clearfix:after {
					content: "";
					display: table;
				}
			}

			.clearfix:after {
				/* after伪元素:在...后面 */
				content: "";
				/* 内容为空 */
				display: block;
				/* 显示模式为块元素block */
				height: 0;
				visibility: hidden;
				/* 显示状态:隐藏 */
				clear: both;
				/* 清除两端浮动 */
			}


			.box {
				width: 200px;
				height: 400px;
				border: 1px solid red;
				font-size: 36px;
				text-align: center;
				/* 文字水平居中 */
				line-height: 400px;
				/* 文字垂直居中 */
				float: left;
				/* 浮动:左 */
				margin-left: 40px;
			}

			/* 浮动的盒子会导致标签脱标(脱离标准流)， 解决脱标问题
			1.额外标签法：也称为隔墙法
			2.给父元素添加overflow：hidd
			*/
		</style>
	</head>
	<body>
		<!-- [标签名].类名[$]*个数>tab-->
		<div class="bigbox">
			<div class="box">1</div>
			<div class="box">2</div>
			<div class="box">3</div>
			<div class="box">4</div>
		</div>
		<div class="sbox"></div>
	</body>
</html>