关于html中的浮动

浮动的清除

这是未清除浮动,此时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>

在这里插入图片描述

浮动元素的重叠问题

1.浮动元素不会覆盖文字内容 (可以做文字环绕效果)
2.浮动元素不会覆盖图片内容 (图片属于文本,是特殊的文字)
3.浮动元素不会覆盖表单元素
(输入框、单选按钮、复选框、按钮、下拉选择框等)

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页