大家好，我是一个浮动元素，我在CSS王国中是一个很重要的角色，也许你们现在在工作中很少见到我的身影，因为我的flex兄弟和position定位兄弟在大部分情况下可以取代我，但是我还是想详细的介绍一下我自己，毕竟我曾经也是一个在前端开发中随处可见的明星人物。
为啥会有浮动元素的出现？
很久很久以前，网页排版中需要一种文字环绕的效果，于是我就被创造出来了，用来实现下面这样的效果👇，文字环绕着一个浮动的元素
而且使用我也很简单，只需要设置一个float: left或者right就可以了，代码如下：
后来很多聪明的前端工程师开始使用我来制作多列布局，比如下面这种
浮动元素的特点
上面讲了我出现的原因是用来做文字环绕，以及后面被前端工程师拿去做多栏布局，那么我到底有哪些特点呢？接下来我就好好聊聊👇
首先第一点呢，前面说了，我作为一个浮动元素会导致我后面的文字环绕在我周围，示例代码如下：
<div class="float1">
浮动元素
</div>
<div>
让浮动效果可视化
我们可以在浮动元素上应用 margin，将文字推开，但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流，紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改，来观察到这个现象。
在紧随浮动盒子的第一段文字上添加 special 类，然后在你的 CSS 文件中添加如下规则，它会赋予跟随其后的段落一个背景色。
让浮动效果可视化
我们可以在浮动元素上应用 margin，将文字推开，但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流，紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改，来观察到这个现象。
在紧随浮动盒子的第一段文字上添加 special 类，然后在你的 CSS 文件中添加如下规则，它会赋予跟随其后的段落一个背景色。
让浮动效果可视化
我们可以在浮动元素上应用 margin，将文字推开，但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流，紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改，来观察到这个现象。
在紧随浮动盒子的第一段文字上添加 special 类，然后在你的 CSS 文件中添加如下规则，它会赋予跟随其后的段落一个背景色。
让浮动效果可视化
我们可以在浮动元素上应用 margin，将文字推开，但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流，紧随其后的元素排布在它的“后方”。你可以将示例代码进行更改，来观察到这个现象。
在紧随浮动盒子的第一段文字上添加 special 类，然后在你的 CSS 文件中添加如下规则，它会赋予跟随其后的段落一个背景色。
</div>
.float1 {
height: 100px;
width: 100px;
background-color: #69c0ff;
float: left;
}
然后第二点呢，我作为浮动元素，我会脱离正常的文档流
比如说下面这个效果，蓝色的元素浮动到左边之后脱离了文档流，就导致红色的正常元素从它底下插了上来，这样就会造成一个问题，有时候前端工程师并不希望我浮动之后影响到我后面的元素，后面我会告诉大家如何解决这个问题
示例代码如下：
<div class="float2">
float2
</div>
<div class="normal">
正常的元素
</div>
.float2 {
height: 100px;
width: 100px;
background-color: #69c0ff;
float: left;
opacity: 0.8;
}
.normal {
height: 200px;
background-color: #ff7875;
}最后第三点呢，我会造成父元素的高度塌陷，比如下面这个例子👇
我浮动之后，我的父容器缩成了一根线，这就是父容器高度塌陷的问题
示例代码如下：
<div class="wrapper">
<div class="float3">
浮动
</div>
</div>
.wrapper {
border: 1px solid;
}
.float3 {
height: 200px;
width: 200px;
background-color: #69c0ff;
float: left;
clear: left;
opacity: 0.8;
}解决浮动元素带来的问题
前面说了我作为一个浮动元素，会导致我后面的元素位置发生变化以及父元素高度塌陷的问题，下面我就讲讲如何解决这两个问题👇
首先，解决我后面的元素位置发生变化的问题，解决办法是可以给我后面出现的元素设置 { clear: left; }，clear属性的意思是清除某个方向的浮动元素对我的影响，比如{ clear: left; }的意思就是清除左边浮动元素对我的影响，{ clear: both; }的意思就是清除左右两边的浮动元素对我的影响
比如下面这个例子，我后面的元素就没有被我的浮动所影响😸
示例代码：
<div class="wrapper">
<div class="float3">
浮动
</div>
<div class="item1">
正常元素，设置了{ clear: left; }
</div>
<div class="item2">
正常元素
</div>
</div>
.wrapper {
border: 1px solid;
}
.float3 {
height: 200px;
width: 200px;
background-color: #69c0ff;
float: left;
clear: left;
opacity: 0.8;
}
.item1 {
height: 80px;
background-color: #ff9c6e;
clear: left;
}
.item2 {
height: 80px;
background-color: #ffc069;
}
.item3 {
height: 200px;
background-color: #d3f261;
}然后再解决父元素高度塌陷的问题，当父容器元素里面只有1个浮动元素的时候，就无法使用上面这种clear的办法了，所以得想别的办法了
废话不多说，讲两个常见的办法：
- 设置父容器元素{ overflow: hidden; }
这个办法其实本质就是触发BFC，触发BFC后父元素的高度就会包含其中的浮动元素，至于什么是BFC我后面会继续写笔记聊到
- 给父容器加一个伪元素:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
这个办法的本质其实就是创造一个父容器内处于最后的子元素，并且让它设置为{ clear: both }，这样子就清除了浮动元素的影响，父元素高度就不会塌陷了
总结
我曾经是一种很好用的特性，但是现在却很少看到我，希望大家可以更多的了解我
