清除浮动（伪元素选择器法）

最新推荐文章于 2023-08-19 18:40:41 发布

jwz934738949

最新推荐文章于 2023-08-19 18:40:41 发布

阅读量802

点赞数

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/jwz934738949/article/details/89787842

版权

HTML与CSS 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

在学习了伪元素选择器后，我们可以通过使用伪元素选择器来清除浮动。

具体方法为：

内容为空；

元素为块级元素；

高度为0；

隐藏元素；

添加clear: both属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
<style>
* {
	padding: 0;
	margin: 0;
}
.c1 p {
	background-color: pink;
	float: left;
}
.c2 p {
	background-color: aqua;
	float: left;
}
.c1::after {
	content: "";
	height: 0;
	display: block;
	visibility: hidden;
	clear: both;
}
</style>
</head>
<body>
<div class="c1">
  <p>我是内容</p>
  <p>我是内容</p>
  <p>我是内容</p>
  <p>我是内容</p>
</div>
<div class="c2">
  <p>我是内容</p>
  <p>我是内容</p>
  <p>我是内容</p>
  <p>我是内容</p>
</div>
</body>
</html>

overflow: hidden作用：

1、可以去掉超出部分的内容；

2、用来清除浮动；

3、当子元素设置了margin-top后，父元素可以不与子元素一同移动。

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

.c1 p {
	background-color: aqua;
	float: left;
}
.c2 p {
	background-color: coral;
	float: left;
}
</style>
</head>
<body>
<div class="c1">
  <p>我是内容</p>
  <p>我是内容</p>
  <p>我是内容</p>
  <p>我是内容</p>
</div>
<div class="c2">
  <p>我是内容</p>
  <p>我是内容</p>
  <p>我是内容</p>
  <p>我是内容</p>
</div>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动（伪元素选择器法）

在学习了伪元素选择器后，我们可以通过使用伪元素选择器来清除浮动。具体方法为：内容为空；元素为块级元素；高度为0；隐藏元素；添加clear: both属性。<!DOCTYPE html><html><head><meta charset="utf-8" /><title>标题</title>...
复制链接

扫一扫