CSS-(3)浮动

慕澜mulan

已于 2024-03-28 16:25:44 修改

阅读量220

点赞数 3

文章标签： css 前端

于 2024-03-28 16:24:27 首次发布

本文链接：https://blog.csdn.net/m0_59753542/article/details/137110941

版权

1.元素浮动

CSS 的 Float （浮动），会使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，其周围的元素也会重新排列。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img{
				width: 60px;
				height: 60px;
				border: 1px solid black;
				/*向右浮动*/
				/*float: right;*/
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/搜索.jpg" alt="加载失败"/>
			<p>
				浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动
				浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动
				浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动
				浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动
				浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动
				浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动
				浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动
				浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动
				浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动
				浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动
			</p>
		</div>
	</body>
</html>

正常实现效果图：

打开float: righ;的注释后，图片实现向右浮动的效果，得到效果图：

如图可以看到，图片向右浮动后一直到接触包含框停止，文字也进行了重新排列，将图片半包裹起来。

2.彼此相邻的浮动元素

如果把几个浮动的元素放到一起，如果有间隙的话，它们会消除，彼此相邻。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img{
				width: 60px;
				height: 60px;
				border: 1px solid black;
				/*向右浮动*/
				<!--float: right;-->
			}
		</style>
	<body>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
	</body>
</html>

效果图：

当我们连续加载四张图片时，会发现图片与图片之间有间距，但是在通配选择器中已经设置了边距margin为0，内边距padding为0，此时可能是HTML中的图片默认为行内元素（inline elements）。如果你在HTML代码中图片标签之间有空白字符（包括空格、制表符或换行符），浏览器会将这些空白字符渲染为间距。要想解决这个问题，就可以使用浮动。

打开float: righ;的注释后效果图：

如图所示，此时图片之间的间距就会被消除。

3.清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性清除浮动。clear 属性指定元素两侧不能出现浮动元素。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img{
				width: 60px;
				height: 60px;
				border: 1px solid black;
				/*向左浮动*/
				float: left;
			}
			/*p{
				clear: both;
			}*/
		</style>
	</head>
	<body>
		<p>第一行</p>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<p>第二行</p>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
		<img src="img/搜索.jpg" alt="加载失败"/>
	</body>
</html>

效果图: