清除浮动的几种方式

Hong Jet

于 2019-06-23 11:56:18 发布

阅读量746

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/smlljet/article/details/93379537

版权

css 专栏收录该内容

8 篇文章

订阅专栏

博客介绍了清除浮动的几种代码实现方式，包括在后面加入一个div（不推荐）、在父元素加overflow：hidden属性、给父元素加伪类（推荐，IE8以上和非IE浏览器支持，支持IE6、7需额外设置样式）以及用br标签清除浮动，并提及清除浮动后的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css</title>
	</head>
	 <style type="text/css">
	 	*{
	 		margin:0;
	 		padding: 0;
	 	}
	 	.main{
	 	 border: 5px solid red;
	 	}
	 	.div1 , .div2 , .div3{
	 	 float: left;
	 	 width: 100px;
	 	 height: 100px;
	 	}
	    .div1{
	    	background: deepskyblue;
	    }
	    .div2{
	    	background:yellow;
	    }
	    .div3{
	    	background:blue;
	    }
	   
	 </style>
	<body>
	<div class="main">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		
		
	</div>
	</body>
</html>

没清除浮动前效果

在这里插入图片描述

1 在后面加入一个div （要多渲染一个div 不推荐）
在这里插入图片描述
2 在父元素加个属性 overflow：hidden

.main{
	 	 border: 5px solid red;
	 	 overflow: hidden;
	 	}

3 父元素加个伪类（推荐使用这种）IE8以上和非IE浏览器才支持:after，如果想要支持IE6、7，需要给 main元素，设置样式 *zoom: 1;

.main:after{
	 		content: '';
	 		display: table;
	 		clear: both;
	 	}

4 br 标签清除浮动

<br clear="all"/>

以上几种方式清除浮动后效果如下图
在这里插入图片描述