消除浮动，只需知道这么多

最新推荐文章于 2022-10-11 15:16:40 发布

肖申克的陪伴

最新推荐文章于 2022-10-11 15:16:40 发布

阅读量517

点赞数 5

分类专栏：前端大开发文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_42076902/article/details/113094336

版权

前端大开发专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文详细介绍了浮动(float)在网页布局中的作用，即让元素脱离正常文档流，水平移动直到碰到边界。浮动会导致父元素高度坍塌，影响后续元素布局。文章列举了四种解决浮动问题的方法：设定固定高度、父元素也浮动、使用overflow:hidden和添加清除浮动的空div，以及使用clearfix伪类。每种方法的优缺点都有所阐述，建议在实际开发中根据需求选择合适的方法。

摘要由CSDN通过智能技术生成

一.什么是浮动？为什么会脱离文档流？

首先了解一下文档流的概念，所谓文档流，就是指文档中可以显示的对象在排列时所占的位置。
而浮动就是使我们的元素脱离正常文档流，按照指定方向发生移动，直到碰到它的父元素边界或另一个浮动元素的边界，浮动是让元素水平方向移动，不能上下移动。当对某个元素设置了浮动(float)时，设置的元素就会脱离文档流，父元素和兄弟元素都会认为该元素不存在，兄弟元素会占据其位置，文本会留处其位置。

浮动特点：

1.使设置浮动的元素脱离正常文档流。
2.父元素和兄弟元素都会认为该元素不存在，兄弟元素会占据其位置，文本会留处其位置。
3.多个float元素默认会水平排列，如果父元素宽度容不下，则会换行。
4.如果子元素都浮动了，那么父元素的高度也就没有了。
5.行内元素设置浮动后会变成块元素(原因是脱离文档流)。

二.如何解决浮动问题。

设置浮动之前：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main{
				background-color: hotpink;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="fl">
				宁静致远
			</div>
			<div class="fr">
				宁静致远
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

设置浮动之后：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main{
				background-color: hotpink;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
				}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="fl">
				宁静致远
			</div>
			<div class="fr">
				宁静致远
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

这里可知道，设置浮动使得前两个脱离正常文档流，两个文字的背景颜色不见了，父元素的高度坍塌变成了0，影响与父元素同级的其他后续元素的正常布局。下面介绍解决方法：
方法1.给浮动元素父盒子设置固定高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main{
				background-color: hotpink;
				height: 30px;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
				}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="fl">
				宁静致远
			</div>
			<div class="fr">
				宁静致远
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

优点：简单直接解决问题；
缺点：此方法不够灵活，适用于高度固定的布局。

方法2.给浮动元素父盒子也添加一个浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main{
				background-color: hotpink;
				float: left;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
				}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="fl">
				宁静致远
			</div>
			<div class="fr">
				宁静致远
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

优点：简单直接解决问题；
缺点：会产生新的浮动，造成新的高度塌陷。

方法3.给父元素设一个overflow:hidden

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main{
				background-color: hotpink;
				overflow: hidden;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
				}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="fl">
				宁静致远
			</div>
			<div class="fr">
				宁静致远
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

优点：代码整洁；
缺点：可能会导致内容显示不完全。

方法4.在浮动元素之后与浮动元素呈现并列关系的位置加上一个空的div（div本身不浮动，没有尺寸），并加个属性：clear:both;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main{
				background-color: hotpink;
				/* overflow: hidden; */
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
				}
			.cl{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="fl">
				宁静致远
			</div>
			<div class="fr">
				宁静致远
			</div>
			<div class="cl"></div>
		</div>
	</body>
</html>

在这里插入图片描述
注意事项：
如果子元素的浮动都为float:left;那么可以clear: left;
如果子元素的浮动都为float:right;那么可以clear:right;
它们的结果和clear: both;一样，所以，比较推荐加上clear: both;

优点：通俗易懂，书写方便；
缺点：代码冗余。

方法5.伪类消除法：给浮动元素的父元素添加一个伪类clearfix：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main {
				background-color: hotpink;
				/* overflow: hidden; */
			}

			.fl {
				float: left;
			}

			.fr {
				float: right;
			}

			.clearfix::after {
				content: '';
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="main clearfix">
			<div class="fl">
				宁静致远
			</div>
			<div class="fr">
				宁静致远
			</div>
		</div>
	</body>
</html>