float:left/right/none; 主要功能：让块元素排一在一排！！！！
特性：
1.根据浮动方向，可以改变块元素的排列顺序 2.加了浮动，行内元素就变成块元素 3.加了浮动不写固定宽高的时候，默认内容宽高 4.加了浮动就半脱离文档流（但是还是会把标签里面的内容给挤出来）
注意： 5.只要给子级加了浮动一定要给父级清除浮动！
一个没有高的父级里面子级加了浮动以后，父级就没有高了！（清除浮动方法：给父级加一个overflow：hidden；--溢出隐藏！）
6.浮动元素必须抱在一个单独的div！（一个父级里面有一个是浮动元素，其他的也必须都是浮动元素）
7.父级元素里面的所有子级浮动元素超出父级宽度，会从第二排开始排列！
=============================================
写页面步骤
从大到小 从外到内 从上到下 从左到右
<!DOCTYPE html>\
<html lang="en">\
<head>\
<meta charset="UTF-8">\
<meta name="viewport" content="width=device-width, initial-scale=1.0">\
<meta http-equiv="X-UA-Compatible" content="ie=edge">\
<title>Document</title>\
<style>\
ul,li{margin:0;padding:0}\
ul{\
border:3px solid black;\
}\
li{\
width:100px;\
height:100px;\
list-style: none;\
background:blue;\
}\
.li1{\
width:80px;\
background:red;\
float: left;\
}\
</style>\
</head>\
<body>\
<ul>\
<li class="li1"></li>\
<li class="li2">1234567890</li>\
</ul>\
</body>\
</html>
1.同级关系下,li1浮动，li2不浮动，就会导致li2元素跑到li1下面，但是li2里面的内容会被挤开，证明了浮动是半脱离文档流的，所以同级关系尽量都浮动
2.同级都浮动的情况下，如果父级没有给高度，那么父级元素会因为没有内容撑开自身，而导致页面出问题。解决
清除浮动的方法：
1.给浮动元素的父级添加一个overflow：hidden；
2.给浮动元素的最后面添加一个空的块标签，给这个空的块标签加一个样式：clear：both；
3.定义一class：
.clearfix:after{ display:block; content:'';clear:both;}
把clearfix给浮动元素的父级！
clear：both/left/right； 清除浮动；两边/左边/右边
