【博学谷学习记录】超强总结，用心分享 | 浮动--float

在html布局中，想要脱离文档的标准流的方式有两种：浮动和定位。今天就来总结一下浮动，以及遇到的问题。

首先，浮动是什么？

在网页的标准流中，元素的布局，大多都是纵向布局，想要实现横向的布局，就需要脱离标准流。浮动是让页面中的元素可以水平排列通过浮动可以制作一些水平方向的布局，浮动的元素会脱离半个标准流，也就是在页面中会占据一定的位置，但是会不受标准流元素的影响，另外浮动的元素会更改为块级元素，可设置宽高，浮动后的元素，性质有些类似行内块。

浮动的方式有两种：

左浮动和右浮动

左浮动：

float：left；

浮动中最常用的就是左浮动，让浮动的元素可以从左向右依次进行排列，基本上没有任何问题。

右浮动：

不常用，所以我在使用的过程中，经常出错。

float：right；

错误1:顺序

<ul>
        <li>第1个li标签</li>
        <li>第2个li标签</li>
        <li>第3个li标签</li>
        <li>第4个li标签</li>
        <li>第5个li标签</li>
    </ul>

正常左浮动的效果说这样的

 但是右浮动的效果是

 因为我们正常的思维和电脑不一样，所以在使用右浮动的时候，会导致上面的元素跑到最右边去，如果向右正常使用，就需要倒着写标签。

解决办法：

父盒子设置设置右浮动，子元素们设置左浮动

ul{
            float: left;
}
li{
float: right;
}

效果如图：

错误2: 失效

具体原因没有找到，（而且再次尝试时又有效果啦~）但是在写程序的时候遇到过浮动失效的时候，检查代码时显示浮动的程序是灰色的，修改时设置float：left；然后设置right;0,也是无法实现角色在右边的样子

解决办法：

1.设置定位，子绝父相，设置right值即可。

2.设置父盒子宽度，在一定情况下，没有设置父盒子宽度时，浮动也会失效。

3.查看自己父盒子的宽度，如果宽度不够，右浮动同样也会被迫浮动到下一行

如果已上三种方法都没有解决，可以尝试父级盒子清除浮动影响，再来调试。