有关浮动的介绍和使用说明

最新推荐文章于 2024-10-11 08:32:18 发布

雷子丸丸

最新推荐文章于 2024-10-11 08:32:18 发布

阅读量486

点赞数

文章标签： html

本文链接：https://blog.csdn.net/LZww9900/article/details/110545675

版权

一序言

浮动是一项比较常用的技术，掌握它能够更好的去处理一些内容

二主体

浮动的特性：

① 浮动就是漂浮，把一些元素漂浮起来，从而不会受块级元素的影响，边框也不会随元素的大小而变换。

② 浮动的元素按照浮动属性会从父元素的左上角或者右上角排排站，当父元素的宽度不足以放下浮动元素时，会换行显示，并且换行后的起始位置由设置的浮动属性值来决定。

③ 浮动脱离文档流后，下面未浮动的元素会占据浮动元素的位置，导致未浮动的元素会被浮动的元素遮挡，但文字是不会被遮挡。

下面我会用具体的例子来说明问题：

这是没有设置浮动的样子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<div style="border: 1px solid black;width:300px ;height: 350px;">
			<div style="width: 100px ;height: 100px;background-color: pink;"></div>
			<div class="s" style="width: 150px ;height: 100px;background-color: lightblue;"></div>
			<div style="width: 100px ;height: 150px;background-color: orangered;"></div>
		</div>
	</body>
</html>

当加入浮动后：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.s{
				float: left;
			}
				
			
		</style>
	</head>
	<body>
		<div style="border: 1px solid black;width:300px ;height: 350px;">
			<div style="width: 100px ;height: 100px;background-color: pink;"></div>
			<div class="s" style="width: 150px ;height: 100px;background-color: lightblue;"></div>
			<div style="width: 100px ;height: 150px;background-color: orangered;"></div>
		</div>
	</body>
</html>

我是给淡蓝色的元素设置了浮动，虽然不能立体的看出它漂浮了起来但是通过分析，我们能看出它从原来的位置出来了，所以在它下面的橘色元素占据了它的位置，并且淡蓝色覆盖了没有漂浮的橘色。

那么怎样能在编辑的过程中清除浮动呢？

① 给父级元素添加 class="clearflex"

② 在css中给父级元素添加属性：overflow：hidden；

③ 伪元素清除

④ 建立空的div，命名为clear，在css中添加clear：both

我会用代码进行说明其中一种：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.s{
				float: left;

			}
			
		</style>
	</head>
	<body>
		<div style="border: 1px solid black;width:300px ;height: 350px;">
			<div style="width: 100px ;height: 100px;background-color: pink;"></div>
			<div class="clearflex" style="width: 150px ;height: 100px;background-color: lightblue;"></div>
			<div style="width: 100px ;height: 150px;background-color: orangered;"></div>
		</div>
	</body>
</html>