CSS---清除浮动的方法

写给自己：包含三种方法，在代码注释中

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS---清除浮动的方法</title>
	<style type="text/css">
		.list{
			width: 250px;
			/* height: 400px; 浮动时：如果不给高度会出现问题*/
			border: 1px solid #00FFFF;
			margin: 50px auto 0;
			list-style: none;/* 去掉小圆点 */
			padding: 0;
			/* overflow: hidden;  第一种 清除浮动的方法 */
		}
		.list li{
			width: 100px;
			height: 50px;
			background-color: gold;
			margin: 10px;
			float: left;
		}
		/* 解决margin-top塌陷的问题
		.clearfix:before{
			content: "";
			display: table;
		} */
/* 		第三种清除浮动的第三种方法
		.clearfix:after{
			content: "";
			display: table;
			clear:both ;
			
		} */
		/* 兼容性写法 */
		.clearfix:before,.clearfix:after{
			content: "";
			display: table;
		}
		.clearfix:after{
			clear: both;
		}
		.clearfix{
			zoom: 1;      兼容IE浏览器,清除浮动
		}
	</style>
</head>
<body>
	<!-- ul.list>li{$}*8 -->
	<ul class="list clearfix">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<!-- <div style="clear: both;"></div>    清除浮动的第二种方法 （不推荐）-->
	</ul>
	
</body>
</html>

Go· again

发布了44 篇原创文章 · 获赞 2 · 访问量 1128

私信关注

CSS---清除浮动的方法

写给自己：包含三种方法，在代码注释中

猜你喜欢