CSS学习之清除浮动

最新推荐文章于 2025-06-03 23:18:49 发布

原创最新推荐文章于 2025-06-03 23:18:49 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

浮动产生的负作用：

当子盒子在父盒子内部有浮动效果时，父盒子由于没有合适的高度和宽度，父盒子不能完全包含子盒子，布局就会出现差错。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div{
				background-color: red;
				border: 1px seagreen solid;
			}
			.div1{
				width: 50px;
				height: 50px;
				background: #eee;
				float:left ;
				margin-left: 10px;
				
			}
			.div2{
				width: 50px;
				height: 50px;
				background: #bbb;
				margin-left: 10px;
				float: left;
			}
			.div3{
				width: 50px;
				height: 50px;
				background: #ddd;
				float: left;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
		</div>
		
	</body>
</html>

父元素不能被子元素撑开

清楚浮动方式：

1、对父元素设置适当的高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div{
				height: 60px;
				/*给父元素设置一个合适高度*/
				background-color: red;
				border: 1px seagreen solid;
			}
			.div1{
				width: 50px;
				height: 50px;
				background: #eee;
				float:left ;
				margin-left: 10px;
				
			}
			.div2{
				width: 50px;
				height: 50px;
				background: #bbb;
				margin-left: 10px;
				float: left;
			}
			.div3{
				width: 50px;
				height: 50px;
				background: #ddd;
				float: left;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
		</div>
		
	</body>
</html>

2、利用overflow：hidden

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div{
				overflow: hidden;
				/*多余部分隐藏   贴近内容*/
				zoom: 1;
				/*兼容IE*/
				/*zoom比例缩放*/
				background-color: red;
				border: 1px seagreen solid;
			}
			.div1{
				width: 50px;
				height: 50px;
				background: #eee;
				float:left ;
				margin-left: 10px;
				
			}
			.div2{
				width: 50px;
				height: 50px;
				background: #bbb;
				margin-left: 10px;
				float: left;
			}
			.div3{
				width: 50px;
				height: 50px;
				background: #ddd;
				float: left;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
		</div>
		
	</body>
</html>

3、clear：both

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div{
				background-color: red;
				border: 1px seagreen solid;
				
			}
			/*.clearfloat:after{
				clear: both;
				content: '';
				display: block;
			}*/
			.div1{
				width: 50px;
				height: 50px;
				background: #eee;
				float:left ;
				margin-left: 10px;
				
			}
			.div2{
				width: 50px;
				height: 50px;
				background: #bbb;
				margin-left: 10px;
				float: left;
			}
			.div3{
				width: 50px;
				height: 50px;
				background: #ddd;
				float: left;
				margin-left: 10px;
			}
			.clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="div clearfloat">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
			<div class="clear"></div>
		</div>
		
	</body>
</html>

4、：after

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div{
				background-color: red;
				border: 1px seagreen solid;
				
			}
			.clearfloat:after{
				clear: both;/*清除浮动*/
				content: '';/*不会有内容显示在页面中*/
				display: block;/*显示*/

			}
			.div1{
				width: 50px;
				height: 50px;
				background: #eee;
				float:left ;
				margin-left: 10px;
				
			}
			.div2{
				width: 50px;
				height: 50px;
				background: #bbb;
				margin-left: 10px;
				float: left;
			}
			.div3{
				width: 50px;
				height: 50px;
				background: #ddd;
				float: left;
				margin-left: 10px;
			}

		</style>
	</head>
	<body>
		<div class="div clearfloat">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
		</div>
		
	</body>
</html>

5、给父元素添加浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div{
				background-color: red;
				border: 1px seagreen solid;
				float: left;
				
			}
			.div1{
				width: 50px;
				height: 50px;
				background: #eee;
				float:left ;
				margin-left: 10px;
				
			}
			.div2{
				width: 50px;
				height: 50px;
				background: #bbb;
				margin-left: 10px;
				float: left;
			}
			.div3{
				width: 50px;
				height: 50px;
				background: #ddd;
				float: left;
				margin-left: 10px;
			}
			.clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="div clearfloat">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
		</div>
		
	</body>
</html>