清除浮动的方法

最新推荐文章于 2022-11-24 11:37:35 发布

菠萝芒果橙

最新推荐文章于 2022-11-24 11:37:35 发布

阅读量115

点赞数

分类专栏： HTML和CSS

本文链接：https://blog.csdn.net/W_0029/article/details/98205551

版权

HTML和CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

清除浮动的方法

清除浮动本质叫做闭合浮动，清除浮动就是把盒子圈到里面，让父盒子闭合出入口不让子盒子出来影响其他元素
在CSS中，clear属性用于清除浮动
基本语法为

选择器{clear：属性值；}

一、额外标签法

未清除浮动时效果为：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.father {
		border: 1px solid green;
		width: 300px;

	}
	.big {
		width: 100px;
		height: 100px;
		background-color: skyblue;
		float: left;
	}
	.small {
		width: 80px;
		height: 80px;
		background-color: pink;
		float: left;
	}
	.footer {
		width: 400px;
		height: 100px;
		background-color: yellow;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="big"></div>
		<div class="small"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

使用额外标签法之后效果

<div class="clear"></div>  <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 -->


.clear {
		clear: both;
		/*如果清除了浮动， 父亲去自动检测孩子的高度  以最高的为准*/
	}

二、父级添加overflow属性方法

给父级添加overflow之后效果

.father {
		border: 1px solid green;
		width: 300px;
		overflow: hidden;   /*这个清除浮动属性要添加给父盒子，别添加错位置*/
		/*而且不是所有的浮动都需要清除 ，只需要清除那些影响布局的盒子的浮动*/
	}

三、使用after伪元素清除浮动

使用after伪元素清除浮动后的效果

.clearfix:after {  /*正常浏览器 清除浮动*/
		content:"";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
.clearfix {
		*zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
	}



<div class="father clearfix">

四、使用before和after双伪元素清除浮动

使用before和after双伪元素清除浮动后的效果

.clearfix:before, .clearfix:after {
		content: "";
		display: table;
	}
.clearfix:after {
		clear: both;
	}

.clearfix {
		*zoom: 1;
	}

<div class="father clearfix">

菠萝芒果橙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的方法

清除浮动的方法清除浮动本质叫做闭合浮动，清除浮动就是把盒子圈到里面，让父盒子闭合出入口不让子盒子出来影响其他元素在CSS中，clear属性用于清除浮动基本语法为选择器{clear：属性值；}一、额外标签法未清除浮动时效果为：<!DOCTYPE html><html lang="en"><head> <meta c...
复制链接

扫一扫