盒子的浮动和浮动的清除

最新推荐文章于 2022-09-03 11:07:41 发布

qq_37175053

最新推荐文章于 2022-09-03 11:07:41 发布

阅读量900

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/qq_37175053/article/details/105615262

版权

未使用浮动前

使用浮动后

float 属性使盒子脱离标准流，浮动的盒子在一行上显示。
使用浮动后

清除浮动后

清除浮动的方法

给父盒子设置高度。
给父盒子使用伪元素清除浮动。

.clearfix:after{
			content: "";
			display: block;
			clear: both;
}

额外标签法,在浮动元素后面添加额外标签。

<div style="clear:both;"> </div>

4.给父盒子添加overflow:hidden属性。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>float</title>

	<style type="text/css">
	/* float 使盒子脱离标准流，浮动的盒子在一行上显示 */
	/* 行内元素浮动后转为行内块 */
		.div1 {
			background-color: pink;
			/* overflow: hidden; */
		}
		.red,.green,.yellow{
			width: 300px;
			height: 300px;
		}
		.red{
			background: red;
			float: left;
		}
		.green{
			background: green;
			float: left;
		}
		.yellow{
			background: yellow;
			float: right;
		}
		.clearfix:after {
			content: '';
			display: block;
			clear: both;
		}
		/* 让.clearfix兼容IE浏览器 */
		.clearfix {
			zoom: 1;
		}
	</style>
</head>
<body>
	<div class="div1">
	<!-- <div class="div1 clearfix"> -->
		<div class="red"></div>
		<div class="green"></div>
		<div class="yellow"></div>
		<!-- <div style="clear: both;"></div> -->
	</div>

</body>
</html>