前端开发--css--清除浮动

最新推荐文章于 2025-06-02 22:13:22 发布

原创最新推荐文章于 2025-06-02 22:13:22 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

html +css +javascript 专栏收录该内容

43 篇文章

订阅专栏

下面介绍浮动的缺点：

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>块元素</title>
	<style type="text/css">
		
		.list{
			width: 210px;
	/*		height:400px;*/
			border: 1px solid black;
			margin: 50px auto 0;
			list-style: none;
			padding: 0;

		}

		.list li{
			width: 50px;
			height: 50px;
			background-color: gold;
			margin: 10px;
			float: left;
		}

	</style>
</head>
<body>

	<!-- ul.list>li{$}*8 -->
	<ul class="list">
		<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>9</li>
	</ul>
	
</body>
</html>

在这里插入图片描述
我们可以看到，上面的浮动元素（子元素）撑不开父级元素的高度。那么怎么解决呢-----清除浮动
1、子元素浮动。
2、父元素不设置高度。

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>块元素</title>
	<style type="text/css">
		
		.list{
			width: 210px;
	/*		height:400px;*/
			border: 1px solid black;
			margin: 50px auto 0;
			list-style: none;
			padding: 0;
		/*	第一种清除浮动的方法

			overflow: hidden;*/

		}

		.list li{
			width: 50px;
			height: 50px;
			background-color: gold;
			margin: 10px;
			float: left;
		}

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

	</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 >9</li>
		<!-- 第二种方法

		<div style='clear:both'></div> -->
	</ul>
	
</body>
</html>

在这里插入图片描述

将margin top 和清除浮动两个问题一起解决：

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>块元素</title>
	<style type="text/css">
		
		.list{
			width: 210px;
	/*		height:400px;*/
			border: 1px solid black;
			margin: 50px auto 0;
			list-style: none;
			padding: 0;
		/*	第一种清除浮动的方法

			overflow: hidden;*/

		}

		.list li{
			width: 50px;
			height: 50px;
			background-color: gold;
			margin: 10px;
			float: left;
		}

		.clearfix:before,.clearfix:after{
			content: '';
			display: table;
		}
		.clearfix:after{
			clear:both;
		}
		.clearfix{
			zoom:1;
		}

	</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 >9</li>
		<!-- 第二种方法

		<div style='clear:both'></div> -->
	</ul>
	
</body>
</html>