::after伪类实现清除浮动

最新推荐文章于 2022-10-08 10:25:21 发布

Dailoge

最新推荐文章于 2022-10-08 10:25:21 发布

阅读量646

点赞数 1

分类专栏： CSS3 HTML5 文章标签：伪类after 清除浮动

本文链接：https://blog.csdn.net/Dailoge/article/details/79149524

版权

HTML5 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS3

4 篇文章 0 订阅

订阅专栏

after顾名思义是在元素后面的意思，实质是在元素之后添加内容。
这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。

用过比较多次,但总是忘了具体怎么写,在这里做个笔记,直接贴源码代码供参考

<!DOCTYPE html>
<html>
<head>
	<title>after伪类清除浮动测试</title>
	<meta charset="utf-8">
<style type="text/css">
ul,ol,li{
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.page ul li{
	float: left;
	width: 100px;
	height: 35px;
	margin-left: 20px;
	line-height: 35px;
	font-size: 14px;
	text-align: center;
	color: #fff;
	background: #ca1928;
}
.page ul::after{
	content: '';
	display: block;
	clear: both;
	zoom:1;
}
</style>
</head>
<body>
	<div class="page">
		<ul>
			<li>新闻中心</li>
			<li>公司简介</li>
			<li>产品中心</li>
		</ul>
		<div class="content">
			<p>这是具体内容这是具体内容这是具体内容这是具体内容这是具体内容这是具体内容这是具体内容这是具体内容</p>
		</div>
	</div>

</body>
</html>

效果图:

Dailoge

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
::after伪类实现清除浮动

after顾名思义是在元素后面的意思，实质是在元素之后添加内容。这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。用过比较多次,但总是忘了具体怎么写,在这里做个笔记,直接贴源码代码供参考 after伪类清除浮动
复制链接

扫一扫