css——浮动与清除浮动的五种方法

最新推荐文章于 2022-06-23 10:16:20 发布

my__road

最新推荐文章于 2022-06-23 10:16:20 发布

阅读量428

点赞数 1

分类专栏： float 文章标签： css css3

本文链接：https://blog.csdn.net/my__road/article/details/107573776

版权

float 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的浮动概念及其对文档流的影响，通过实例展示了浮动元素如何导致父元素塌陷。接着，详细讲解了解决父元素塌陷的五种方法，包括设置浮动、指定高度、添加额外元素、使用伪类以及应用BFC（块级格式化上下文）。这些方法为理解和处理浮动布局中的常见问题提供了实用技巧。

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

学习浮动首先我们要先清楚一个概念——文档流。那么什么是文档流呢？
文档流是文档中可显示对象在排列时所占用的位置。简单来说就是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序。
而今天学习的float就是使得元素脱离文档流从而达到我们想要的效果的方法之一。

一、浮动

首先先来一个正常的文档流：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.mydiv{
				background: skyblue;
			}
			.div1{
				width: 200px;
				height: 200px;
				background: red;
			}
			.div2{
				width: 200px;
				height: 200px;
				background: yellow;
			}
			.div3{
				width: 200px;
				height: 200px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div class="mydiv">
			<div class="div1"></div>
			<div class="div2"></div>
			<div class="div3"></div>
		</div>
	</body>
</html>

他是这样显示的
这是一个正常文档流
现在我们来浮动，当我们给红色div加上浮动后：

.div1{
				float: left;
				width: 200px;
				height: 200px;
				background: red;
			}

红色块浮动

我们可以看到黄色块“不见”了，但是这个“不见”并不是说他不存在了而是他被覆盖了。浮动，顾名思义就是漂浮起来，当一个元素漂浮起来之后，那么他之前所占据的位置也就空出来了。这个时候，浏览器默认就会找其他的元素来填补他的空缺，表现在这个例子中就是黄色div去占据，为了更方便观察我们可以改变大小来看一下
在这里插入图片描述
看我将黄色div的大小变大了，是不是就可以很容易的看见黄色在红色的下方。那现在吧红色，黄色都浮动，为了方便观察同样把绿色块调整大小

看浮动的样式在上层横向排列，而绿色在下方，现在下方没有元素了，绿色就会上移顶替红色、黄色的位置，也就呈现了现在这个样子。
大家注意看蓝色这个背景，是不是想对比与之前小了很多，我们待会儿来说这是为什么。现在我们看三个都浮动
在这里插入图片描述
红黄绿三个块都以一种新的排列方式在上层横向排列起来，蓝色块是不是就都不见了。这是因为当我们元素设置浮动属性的时候，就会脱离文档流，既然它已经脱离了文档流了，那么它就不再会占据空间，而我们的父元素也就是这个蓝色块也就没有元素来支撑他的高度，所以它就塌陷了，这就是我们所说的浮动造成父元素塌陷
既然父元素已经塌陷了，我们就应该去解决他，这样才不会造成后面的更大更多的bug

二、解决父元素的塌陷问题

这里造成父元素塌陷的主要问题就是浮动，那么我们要解决这个问题理所当然就会想到清除浮动，那么该怎么样清除浮动呢？这里有五种方法推荐给大家

父元素设置浮动

<style type="text/css">
			.mydiv{
				float: left;
				background: skyblue;
			}
			.div1{
				float: left;
				width: 200px;
				height: 200px;
				background: red;
			}
			.div2{
				float: left;
				width: 300px;
				height: 300px;
				background: yellow;
			}
			.div3{
				float: left;
				width: 400px;
				height:400px;
				background: green;
			}
		</style>

但这个方法也会有一定的bug，那就是他的高度虽然被撑起来了但是他的高度和子元素最大的高度一致，宽度是所有子元素宽度之和，效果展示
在这里插入图片描述

给父元素设置高度

.mydiv{
				height: 400px;
				background: skyblue;
			}

在这里插入图片描述
这个办法就需要你自己清楚你需要多高的父元素，设置多少就为多少

为父元素添加子元素

这是html

<div class="mydiv">
			<div class="div1"></div>
			<div class="div2"></div>
			<div class="div3"></div>
			<div class="clear"></div>
		</div>

这是css

.mydiv{
				background: skyblue;
			}
			.clear{
				clear: both;
			}

这个方法就是为父元素添加一个子元素，然后给子元素添加clear：both属性；效果展示
在这里插入图片描述

添加伪类
这个方法和上一个方法类似，但是这个方法更加实用，如果网页上有很多地方需要清楚浮动的话用这个方法就十分的nice了
首先看一下html

<div class="mydiv clear">
			<div class="div1"></div>
			<div class="div2"></div>
			<div class="div3"></div>
		</div>

再来看一下css

.mydiv{
		background: skyblue;
	}
.clear:after{
		content: "";
		display: block;
		clear: both;
	}

这个方法虽然看着代码量多了两行，但是之后我们遇到还需要清除浮动的地方我们都可以为他的父元素设置一个叫clear的类就可以了

BFC
最后一个办法就是运用BFC了。可能你们会问BFC是什么？这个BFC一时半会也说不清楚，之后我会出一个专门关于BFC的文章来阐述这个问题。现在大家就只需记住下面的就OK了。
父元素添加overflow：hidden属性
html没有变就不展示了，css如下：

.mydiv{
				background: skyblue;
				overflow: hidden;
			}

在这里插入图片描述

是不是超级简单，今天就到这了！

my__road

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录