前端学习(五）浮动（笔记）
float:left/right/none;
主要功能：让块元素排一在一排！！！！
特性：
1.根据浮动方向，可以改变块元素的排列顺序
2.加了浮动，行内元素就变成块元素
3.加了浮动不写固定宽高的时候，默认内容宽高
4.加了浮动就半脱离文档流（但是还是会把标签里面的内容给挤出来）
注意：
5.只要给子级加了浮动一定要给父级清除浮动！
一个没有高的父级里面子级加了浮动以后，父级就没有高了！（清除浮动方法：给父级加一个overflow：hidden；--溢出隐藏！）
6.浮动元素必须抱在一个单独的div！（一个父级里面有一个是浮动元素，其他的也必须都是浮动元素）
7.父级元素里面的所有子级浮动元素超出父级宽度，会从第二排开始排列！
=============================================
写页面步骤
从大到小
从外到内
从上到下
从左到右
<link rel="stylesheet" href="css/base.css"/>
给html页面引入一个css文件
<!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；
清除浮动；两边/左边/右边
