float 是css 的定位属性。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分（半脱离文档流）。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了（完全脱离文档流），就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。
1.float: right 右浮动时，靠右换行（错行）的解决方法（浮动不换行，非float元素的内容换行）
当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。把右浮动的标签放在正常标签的前面即可。
<!--按下面这种顺序输入的方法是错误的:（浮动的元素换行了）-->
<div>这是非浮动元素，右边是右浮动元素<span style="float: right">右浮动</span><div>
<!--正确的方法:-->
<div><span style="float: right">右浮动</span>这是非浮动元素，右边是右浮动元素</div>
2.浮动造成换行问题
例子如：两个div设置了左浮动，想第三个div换行（如果第三个也是左浮动，则宽度小于父元素剩余宽度的话，就不会换行；如果第三不是浮动等特殊情况，会覆盖第一个div位置，但文字不会覆盖而是环绕）
1.两个div的父元素设置宽度100%，float:left;若第三左浮动的div就换行了。但是这样改变了宽度。而且如果第三个不是浮动也不能满足要求。
2.给第三div设置style="clear:both"，或者加<br />。
（原因浮动的盒子脱标不占据原来的位置）
<span style="font-size:12px;color:#000000;"><style>
.left {
float:left;
width:100px;
height:100px;
background-color: #dd0000;
opacity: 0.5;
}
.left2 {
float:left;
width:40px;
background-color: green;
height:40px;
}
.div3 {
/*float:left;*/
clear:both;
width:50px;
height:50px;
background-color: #3c32ff;
}
</style>
<div class="temp">
<div class="left">left1</div>
<div class="left2">left2</div>
<div class="div3">div3想换行</div>
</div></span>
3.浮动会造成 父元素塌陷 问题。
如果一个父元素的所有子元素都是浮动的，子元素的浮动确定了自身位置，尽管子元素有高度，但是不会影响到父元素的高度，那么这个父元素高度就是0（若子元素没有指的宽度，就是父元素宽度）。如果想要父元素内的浮动元素占有父元素的高度，就需要清除浮动。
解决方法：
3.1 有一种方法，在容器的结束标签前添加一个空标签，在空标签上直接设置样式“clear:both”。
用这种方法来清除浮动，在大多数情况下是有效的，但这不太适合语义化。这取决于一个页面有多少浮动需要清除，这样造成页面上的空标签迅速堆积，而且在页面中没有上下文内容。
<div class="temp">
<div class="left">left</div>
<div class="right">right</div>
<div style="clear:both"></div>
</div>
<style>
.temp {
border:1px solid red;
width:200px;
background-color: yellow;
}
.left {
float:left;
width:50px;
height:50px;
background-color: blue;
}
.right {
float:right;
width:50px;
background-color: green;
}
</style>
3.2 一种清除浮动的技巧是使用“overflow”属性。在具有浮动元素的父容器中置“overflow”的属性值为“hidden”
在IE6里面，父容器是需要设置一个“width”和“height”。因为高度可能是一个变量，宽度为100%，他们将能正常的工作。使用“overflow:auto;”,在IE浏览器中会给元素添加滚动条，这样一来，最好是直接使用“overflow:hidden;”来清除浮动。
使用“overflow”技巧清除浮动，确实存在一些缺点。例如：当你添加样式，或者将嵌套在里面的“span”元素移动到父容器的外面，或者你想给元素添加一个盒子阴影或制作一个下拉菜单，可以看到元素的盒子阴影被切断在父元素之内。
要慎用overflow属性，因为
设置overflow为非visible值，将导致容器生成新的格式化上下文，其布局、相对于浮动的行为等会发生显著变化，清除浮动只不过这一系列变化的其中一个附带作用
。
更多弊端的表现，不论是早先Firefox无端的产生focus、还是在某些情况下触发滚动条、截断绝对定位的层，等等等等，太多了。
3.3 根据上下文，清除浮动更好的方法是clearfix技巧。（推荐使用）
3.3.1基本上是用：父元素上使用after伪元素来新加一个内容 再谈清除浮动：https://swordair.com/on-clearing-float-again/
：after伪元素内容是一个点，本身用来清除浮动，其他代码则是为让这个伪元素不可见。所以很多其他的版本里，可能还会添加 font-size:0;line-height:0; 来进一步保证元素不可见。
3.3.2 还有一个改进的做法：before和after两个伪元素来做，但是还是上面比较常用。
http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html
“clearfix”技巧是基于在
父元素上使用“
:before”和“:after”两个伪元素。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。
单个伪元素（下面不是很明白是什么意思）
值得注意的是，目前每个元素只有一个“:before”和“:after”伪元素。当你尝试使用其他的“:before”和“:after”的clearfix技巧，你的内容可能无法达到想要的效果。
如有不足请谅解！希望给您带来帮助！参考文献：https://blog.csdn.net/qq_21184771/article/details/56335747