欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨
目录
一、什么是浮动、为什么需要浮动
二、怎么添加浮动
三、清除浮动带来的影响
一、什么是浮动、为什么需要浮动
说浮动之前先来说说常用的网页布局准则，网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
浮动：简而言之就是让盒子飘起来了
为什么需要浮动：完成标准流不能完成的布局
就这么简单
什么，不信？？？
好吧，那我就再解释一下，我们都知道块级元素是独占一行显示的，浮动就是让盒子飘起来，左飘右飘，带来的效果就是让多个块级元素在一行显示并且元素顶部对齐，浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐，以达到布局的目的；
浮动的特性：
什么东西都有好有坏，浮动也不例外
浮动元素会脱离标准流，浮动的盒子不在再保留原先的位子
我们可以这样理解：给一个盒子添加浮动后，浮动让这个盒子飘起来了，飘起来之后它本身的位置就空出来了，也就是脱离标准流，不保留原先的位置；
下面的标准流的盒子或内容继续按照标准流布局，自动上去把空的位置占用，那个浮动的盒子就会把自动上去的标准流盒子给盖住，从而影响后面布局，只会影响后面的元素；
浮动还会带来高度塌陷
如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候，那么它的高度就会踏缩为零。这是因为浮动元素脱离了文档流，包围它们的父块中没有内容了，所以“”塌陷“”了。
浮动的元素会具有行内块元素的特性
如果块级盒子没有设置宽度，默认宽度和父级一样宽，添加浮动后，它的大小根据内容来决定
二、怎么添加浮动
浮动的书写：float
.one {
/* 左浮动 */
float:left;
/* 右浮动 */
float: right;
/* 没有浮动 */
float: none;
}
直接给盒子添加浮动即可
例1：我们设置两个盒子，不添加浮动
div {
width: 200px;
height: 200px;
}
.one {
background-color: rgb(228, 158, 158);
}
.two {
background-color: rgb(172, 119, 207);
}
<body>
<div class="one"></div>
<div class="two"></div>
</body>
效果如下：
给第一个盒子添加浮动
.one {
float: left;
background-color: rgb(228, 158, 158);
}
效果如下：
可以看到第一个盒子浮动后飘起来了，下面的盒子上去“补位”，所以第一个盒子压住了第二个盒子
例二
我们给第二个盒子里放两个盒子
.three {
width: 150px;
height: 150px;
background-color: rgb(148, 224, 208);
}
.four {
width: 100px;
height: 100px;
background-color: rgb(48, 171, 187);
}
<div class="two">
<div class="three">看到了吗我们两个不在</div>
<div class="four">同一行</div>
</div>
效果如下：
我们想要两个小盒子在一行显示，就可以加浮动
.three {
float: left;
width: 150px;
height: 150px;
background-color: rgb(148, 224, 208);
}
.four {
float: left;
width: 100px;
height: 100px;
background-color: rgb(48, 171, 187);
}
效果如下：
三、清除浮动带来的影响
前面说了浮动的特性，会影响下面的布局，现在就来解决这个问题
高度塌陷：
我们可以这样理解一个盒子，在不给盒子设置大小的情况下，盒子的大小是根据输入的内容决定的；而浮动是让盒子飘起来，并且不占原来的位置，所以一个不设大小盒子里装着浮动的小盒子就会出现高度塌陷的情况（也就是父盒子没有内容）。
出现的原因就是父盒子没有高度
例三
我们给一个大盒子里放两个小盒子，都给设置好大小，添加浮动
div {
width: 300px;
height: 300px;
}
.two {
border: 4px solid #333333;
background-color: rgb(172, 119, 207);
}
.three {
float: left;
width: 150px;
height: 150px;
background-color: rgb(148, 224, 208);
}
.four {
float: left;
width: 100px;
height: 100px;
background-color: rgb(48, 171, 187);
}
<div class="two">
<div class="three"></div>
<div class="four"></div>
</div>
效果如下：
我们去掉父盒子的高度，就会出现高度塌陷的情况
div {
width: 300px;
/* height: 300px; */
}
效果如下：
清除浮动带来的影响：
语法：clear：left/right/both
使用方法：
1、给 父级 设置高度
2、额外标签法： 在浮动元素末尾添加一个空的标签，例如
.one {clear:both;}
<div class=“one”></div>
3、父级添加overflow属性： 给父级添加overflow属性，属性值设置为hidden,auto或scroll
4、父级添加after伪元素
给父级添加after属性，.one:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;}
.one{*zoom:1;}
5、父级添加双伪元素： 给父级添加
.one:before,.one:after {
content:"";
display:table;}
.one:after{clear:both;}
.one{*zoom:1;}
本期到这里就结束了，感谢阅读！有问题留言，及时回复
- 下期：还没有想好HHHHHH
- 点赞加关注，持续更新实用技巧、热门资源、软件教程等
- 有任何 软件 影视 教程资源 考证资料等需求留言即可
- 回复20210803获得源码下载链接 （CSDN下载要积分或收费，所以放在下面了）
扫一扫
979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
