浮动

最新推荐文章于 2025-04-06 16:56:43 发布

原创最新推荐文章于 2025-04-06 16:56:43 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浮动

关于浮动的一些事项：

1、只要使用了浮动便是脱离了文档流，不占有空间就是文档流。

2、浮动了的元素会优先显示。

3、清除浮动的方法：直接找到最后一个元素的后边的标签添加 clear：both。

代码如下：（内含注释）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0; margin: 0;
			}
			div{
				/*display: inline-block;*/
				float: left;
				width: 60px;
				height: 25px;
				background: red;
				border-radius: 50%;
				text-align: center;
				line-height: 25px;
				color: #fff;
			}
			p{
				width: 80px;
				height: 25px;
				background: black;
				clear: both;
			}
			.clearfix:after{/*伪类选择器,在...之后插入*/
				content: "";
				display: block;
				clear: both;
				/*width: 50px;
				height: 50px;
				background: green;*/
			}
			br{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div <!--class="clearfix"-->>4</div>
		<br />
		<p>5</p>
	</body>
</html>