▐ 文档流：
由于网页默认是一个二维平面，当我们在网页中一行行摆放标签时，块标签会独占一行，行标签则只占自身大小，这种情况下要实现网页布局就很麻烦了，所以我们就需要通过一些方法来改变这种默认的布局方式！
▐ 浮动：
CSS中的浮动属性可以让标签脱离原来的文档流，也就是二维平面，浮动后的标签默认是内容的大小，且可以为其设置宽和高。
➱ 语法：**float：**left(向左浮动) / right(向右浮动) / none(不浮动)
▐ 存在问题：
浮动后的标签不占用原来文档流的空间，下面的标签就会向上移动，会影响后面的网页布局。
▐ 如何解决浮动问题？
-
为父级标签设置高度，将父级标签撑开。
-
在浮动的标签后使用清除浮动属性，自动让父级标签撑开（推荐）
▐ 实战练习：
✎. 例如我们做一个导航栏，如图所示：
**第一步：**用4个<div>标签来修饰内容并通过css设置背景颜色和文字颜色
html<!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标签默认是内容大小
html<!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>标签设置宽和高，并使文本内容居中
html<!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：盒子模型 的文章：
html<!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标签即可。
➱ 注意是在浮动的标签后添加，不要添加到父级标签之后了!
html<!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>测试下：
这是不清除浮动效果的结果：
本次的分享就到此为止了，希望我的分享能给您带来帮助，创作不易也欢迎大家三连支持，你们的点赞就是博主更新最大的动力！ 如有不同意见，欢迎评论区积极讨论交流，让我们一起学习进步！ 有相关问题也可以私信博主，评论区和私信都会认真查看的，我们下次再见
海漫浩浩,我亦苦作舟!大家一起学习,一起进步! 本人微信：g2279605572