CSS：浮动

最新推荐文章于 2024-10-15 22:21:38 发布

一颗小谷粒

最新推荐文章于 2024-10-15 22:21:38 发布

阅读量1.2k

点赞数 14

分类专栏： Web前端开发文章标签： css 前端 html5

本文链接：https://blog.csdn.net/2301_79263365/article/details/139303652

版权

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

16 篇文章 6 订阅

订阅专栏

▐ 文档流：

由于网页默认是一个二维平面，当我们在网页中一行行摆放标签时，块标签会独占一行，行标签则只占自身大小，这种情况下要实现网页布局就很麻烦了，所以我们就需要通过一些方法来改变这种默认的布局方式！

▐ 浮动：

CSS中的浮动属性可以让标签脱离原来的文档流，也就是二维平面，浮动后的标签默认是内容的大小，且可以为其设置宽和高。

➱ 语法：float：left(向左浮动) / right(向右浮动) / none(不浮动)

▐ 存在问题：

浮动后的标签不占用原来文档流的空间，下面的标签就会向上移动，会影响后面的网页布局。

▐ 如何解决浮动问题？

1. 为父级标签设置高度，将父级标签撑开。

2. 在浮动的标签后使用清除浮动属性，自动让父级标签撑开（推荐）

▐ 实战练习：

✎. 例如我们做一个导航栏，如图所示：

第一步：用4个<div>标签来修饰内容并通过css设置背景颜色和文字颜色
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.content{
                //设置文字颜色和背景颜色
				color: antiquewhite;
				background-color: #50536e;		
			}
		</style>
	</head>
	<body>
	    <div class="content">消息</div>
		<div class="content">动态</div>
		<div class="content">收藏</div>
		<div class="content">投稿</div>
	</body>
</html>
第二步：通过css的浮动属性，让4个<div>漂浮在一行，且浮动后的div标签默认是内容大小
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.content{
				color: antiquewhite;
				background-color: #50536e;
                //向左浮动
			    float: left;
			}
		</style>
	</head>
	<body>	
	    <div class="content">消息</div>
		<div class="content">动态</div>
		<div class="content">收藏</div>
		<div class="content">投稿</div>
	</body>
</html>
第三步：为浮动后的4个<div>标签设置宽和高，并使文本内容居中
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.content{
				color: antiquewhite;
				background-color: #50536e;	
				float: left;
				//设置宽高以及文本居中
				text-align: center;
				width: 150px;
				height: 50px;
				line-height: 50px; 
			}
		</style>
	</head>
	<body>
	    <div class="content">消息</div>
		<div class="content">动态</div>
		<div class="content">收藏</div>
		<div class="content">投稿</div>	
	</body>
</html>
第四步：使这4个<div>标签整体在页面上居中。需要在这4个div标签外部再套一个div标签，

并设置这个父级div标签宽度=4*子级div标签宽度，通过margin: 0% auto;使其居中即可。 🎀 这里只有让父级div标签宽度=4*子级div标签宽度才能实现居中，否则该父级div标签是默认占一整行的，无法通过margin: 0% auto;使其居中.

📖 不了解margin属性的小伙伴可以参考之前 CSS：盒子模型的文章：

CSS：盒子模型-CSDN博客
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.content{
				color: antiquewhite;
				background-color: #50536e;
				float: left;
				text-align: center;
				width: 150px;
				height: 50px;
				line-height: 50px; 	
			}
			   .head{
				width: 600px;
				margin: 0% auto;
			} 
		</style>
	</head>
	<body>
		<div class="head">
	    <div class="content">消息</div>
		<div class="content">动态</div>
		<div class="content">收藏</div>
		<div class="content">投稿</div>
		</div>
	</body>
</html>
第五步：清除浮动影响；即在浮动标签后添加一个clear属性修饰的空div标签即可。

➱ 注意是在浮动的标签后添加，不要添加到父级标签之后了!
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.content{
				color: antiquewhite;
				background-color: #50536e;
				float: left;
				text-align: center;
				width: 150px;
				height: 50px;
				line-height: 50px; 
			}
			   .head{
				width: 600px;
				margin: 0% auto;
			} 
		</style>
	</head>
	<body>	
		<div class="head">
	    <div class="content">消息</div>
		<div class="content">动态</div>
		<div class="content">收藏</div>
		<div class="content">投稿</div>
		<div style="clear: left;"></div>
		</div>	
	</body>
</html>
清除浮动后，在之后的网页布局中下面的标签就不会向上移动了；例如我们在这个导航栏后添加一个标题标签<h1>标题<h1>测试下：

这是不清除浮动效果的结果：