关于html中的浮动

最新推荐文章于 2022-04-24 10:01:17 发布

吱吱复卿卿

最新推荐文章于 2022-04-24 10:01:17 发布

阅读量266

点赞数 2

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/qq_46039848/article/details/107783162

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

浮动的清除

这是未清除浮动，此时d部分不能显示

<!DOCTYPE html>
<html>					
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a {
				width:20%;
				background-color: #000000;
			}
			.b {
				width:60%;
				background-color: green;
			}
			.c {
				width:20%;
				background-color: blue;
			}
			.a,.b,.c {
				height: 200px;
				float: left;
			}
			.d {
				width: 100%;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b">/*浮动的清除  overflow与clear</div>
		<div class="c"></div>
		<div class="d"></div>
	</body>
</html>

这是此时的效果图

有两种解决办法。

1.增加一个父级元素让它增加高度或者用overflow:auto;溢出

此时给父级元素子级元素的高度，不加浮动

<!DOCTYPE html>
<html>					
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a {
				width:20%;
				background-color: #000000;
			}
			.b {
				width:60%;
				background-color: green;
			}
			.c {
				width:20%;
				background-color: blue;
			}
			.a,.b,.c {
				height: 200px;
				float: left;
			}
			.d {
				width: 100%;
				height: 200px;
				background-color: pink;
			}
			.out {
				height: 200px;
				border: red solid 5px;
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="a"></div>
			<div class="b">/*浮动的清除  overflow与clear</div>
			<div class="c"></div>
		</div>
		<div class="d"></div>
	</body>
</html>

效果图在这里插入图片描述
或者用overflow

<!DOCTYPE html>
<html>					
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a {
				width:20%;
				background-color: #000000;
			}
			.b {
				width:60%;
				background-color: green;
			}
			.c {
				width:20%;
				background-color: blue;
			}
			.a,.b,.c {
				height: 200px;
				float: left;
			}
			.d {
				width: 100%;
				height: 200px;
				background-color: pink;
			}
			.out {
				overflow: auto;
				border: red solid 5px;
			}
		</style>
	</head>
	<body>
		<div class="out">
			<div class="a"></div>
			<div class="b">/*浮动的清除  overflow与clear</div>
			<div class="c"></div>
		</div>
		<div class="d"></div>
	</body>
</html>

效果图如下
在这里插入图片描述

2.给下一元素增加clear

不用增添父级元素，使用clear
clear: left; //清除左浮动
clear: right; //清除右浮动
clear: both; //清除所有浮动

<!DOCTYPE html>
<html>					
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a {
				width:20%;
				background-color: #000000;
			}
			.b {
				width:60%;
				background-color: green;
			}
			.c {
				width:20%;
				background-color: blue;
			}
			.a,.b,.c {
				height: 200px;
				float: left;
			}
			.d {
				width: 100%;
				height: 200px;
				background-color: pink;
				clear: left;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b">/*浮动的清除  overflow与clear</div>
		<div class="c"></div>
		<div class="d"></div>
	</body>
</html>