清除浮动

最新推荐文章于 2022-05-11 00:15:39 发布

Zayn17

最新推荐文章于 2022-05-11 00:15:39 发布

阅读量177

点赞数

分类专栏：前端文章标签：清除浮动

本文链接：https://blog.csdn.net/weixin_43867927/article/details/100747313

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

清除浮动通常用于展示一系列的图片或需要出现在同一行的元素。
如导航栏，通过左右浮动使两个元素分别处于左右两边。

这里的代码来源于黑马的前端课程。

.clearfix:after{
    visibility:hidden;
    clear:both;
    display:block;
    content:".";
    height:0;
}
.clearfix{
     *zoom:1;
 }

案例

首先定义三个方块，并使card1和card2向左浮动。我们可以发现card1和card2处于同一行，于card1和card2不在同一个div的card3被遮盖了。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		/*定义三个方块 */
	 #card1{
	 	width: 200px;
	 	height: 200px;
	 	background-color: yellow;
	 }
	 #card2{
	 	width: 200px;
	 	height: 200px;
	 	background-color: pink;
	 }
	 #card3{
	 	width: 200px;
	 	height: 200px;
	 	background-color: darkblue;
	 }
	</style>
</head>
<body>
	<div>
		<div id="card1"></div>
		<div id="card2"></div>
	</div>
	<div id="card3"></div>
</body>

未加浮动的效果

在这里插入图片描述

加入清除浮动的样式

<body>
	<div class="clearfix">
		<div id="card1"></div>
		<div id="card2"></div>
	</div>
	<div id="card3"></div>
</body>

清除后的效果

card3显示出来了
在这里插入图片描述

Zayn17

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
清除浮动

清除浮动通常用于展示一系列的图片或需要出现在同一行的元素。如导航栏，通过左右浮动使两个元素分别处于左右两边。这里的代码来源于黑马的前端课程。.clearfix:after{ visibility:hidden; clear:both; display:block; content:"."; height:0;}.clearfix{ *z...
复制链接

扫一扫