一、浮动的定义
浮动：float
作用：让我们的元素在某一个方向在一行并排排列
浮动的特殊效果：元素脱离标准流，既可以设置宽高，又可以一行排列。
属性值：left，right
左浮动： float：left； 会依次去贴父元素的左边
浮动是不可以继承的
左浮动： float：left； 依次去贴父元素的左边，序号从左到右
右浮动： float：right； 依次去贴父元素的右边，序号从右到左
同一个父盒子里，子元素可以有不同方向的浮动
二、浮动的性质
1、浮动的元素脱标
常见的标签都是标准流的，区分行块，如果给元素设定浮动属性，元素会脱离标准流，元素既可以设置宽度，又可以排在一行。
span设置了浮动，就会脱标，如果没有添加float:left则不会出现粉色盒子
span标签浮动后，不需要转换成块级标签，就能设置宽高，浮动的标签已经不区分行内、块了。
如果父盒子范围不够放下所有子盒子，后面的盒子会自动换行去贴上一个元素的边，依次去找上一个盒子，如果上一个盒子的距离还不够，再往上找。
子盒子如果高矮不同，中间出现了缝隙，后面的盒子不会去转空
2、没有margin塌陷现象
浮动的元素脱离标准流，标准流利的margin在垂直方向上有塌陷的现象，而脱离标准流后，塌陷失效
浮动前 ↓
浮动后 ↓
3、浮动元素让出标准流位置
元素在标准文档流里有自己的书写位置，一个元素写完之后才能加载另外一个元素。元素浮动之后，不再是标准流，位置会让给后面标准文档流里的标签元素。
粉色盒子设置了float:left；让出的效果像是压盖效果。但我们实际上不需要用浮动制作压盖，用后面学习的绝对定位制作压盖。
同一个父盒子里，有的元素浮动，有的不浮动，这种会影响标准流的显示效果。一个父盒子里的元素要不动，就都别动。
->> 要浮动就都浮动 << -
4、浮动有字围效果
文字不像盒子背景一样，不会被浮动的元素给遮盖住，文字会绕开浮动元素进行排列
5、收缩
div本身是块级元素，如果没有设置宽度，就会独占一行，但是设置浮动后，就会收缩。
三、清除浮动
1、浮动存在的问题
1）浮动的元素不能撑高父级。
元素脱离标准流后，不能再撑高它的父盒子。
2）浮动会影响后面的元素
如果后面的浮动方向相同，会去贴上一个浮动最后的元素的边。
2、直接给父盒子加高度
给父级元素增加高度，它的内部的浮动元素，被限制了范围，不再影响后面的元素浮动。
效果：解决父级高度的问题，解决浮动影响后面的浮动的问题。
问题：高度还是不能够自适应，没有从根本上解决
3、清除浮动属性clear
元素都可以设置一个叫clear的属性，作用是清除浮动
属性值：left、right、both
作用：clear整体表示清除自身受到的其他元素带来的浮动的影响
both:清除受到 的左右两个方向的浮动影响
（box2不受box1的浮动的影响）
但问题：父盒子还是不能被子盒子撑高，margin如果小于中间浮动的子元素的高度，显示效果失效。
4、隔墙法
隔墙法：在相互影响的元素中间加一道墙，阻隔开两
的元素，墙上面添加一个clear属性。
1）外墙法：
在右浮动元素的父盒子之间隔一堵墙。
解决：浮动互相影响
问题：高度不能自适应，Margin失效
- 内墙法
将清除浮动的墙放在有浮动元素的父盒子内部的最后。
只要有浮动，就在盒子内部加一道墙。
>> 解释：cl盒子本身是个标准流，在父盒子最后，把盒子给撑高了，把浮动存在的问题都解决了。
>>解决：浮动相互影响，高度自适应，margin失效。
>> 缺点：I. html结构布局，很多需要进行浮动，每个浮动的盒子都要加个清除浮动.标签，页面结构复杂会出现很多冗杂没有意义的标签。
II.一个盒子内的标签要浮动都浮动，但是清除标签这堵墙是标准流的元素。
5、overflow：hidden
盒子内部的元素可以设置溢出模式，隐藏，自动显示。
overflow：溢出。
属性值：1）hidden 溢出隐藏 2）auto 溢出滚动
overflow的小功能：能清除盒子内部元素的浮动影响，给父盒子添加overflow
解决：相互浮动的影响，高度自适应，margin失效
优势：能够解决所有问题，不会增加无用的标签。
overflow：hidden 加载机制：
高度自适应：如果元素有溢出隐藏的属性，网页加载时，会强制地去元素内部搜索，识别所有内部元素的高度，会用最高的元素高度配给我们父盒子的自适应高度。
浮动影响：加载时，如果有溢出隐藏，强制检索，看盒子内部是否有浮动的元素；如果有，会被整体管理起来，在自身的高度内，不会影响其他的浮动元素。
实际工作中就用overflow来清除浮动。如果遇到大的结构，会在结构之间加一堵外墙。
浮动练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
/*原子类，公共类*/
.inner_c{
width: 970px;
margin: 0 auto;
}
.cl{
clear: both;
}
.h10{
height: 10px;
}
.mb10{
margin-bottom: 10px;
}
.mb8{
margin-bottom: 8px;
}
.mr10{
margin-right: 10px;
}
/*header*/
.header{
overflow: hidden;
}
.header h1{
float: left;
width: 277px;
height: 103px;
background-color: #FF8888;
}
.header .lang{
float: right;
width: 137px;
height: 49px;
background-color: #EEFFBB;
}
.header .nav{
float: right;
width: 679px;
height: 46px;
background-color: #EEFFBB;
}
/*content*/
.content{
overflow: hidden;
}
.content .slide{
float: left;
width: 310px;
height: 435px;
background-color: #FFEE99;
}
.content .main_news{
float: left;
width: 450px;
height: 400px;
}
.content .main_news .main_news1{
height: 240px;
background-color: #AAFFEE;
}
.content .main_news .main_news2{
height: 110px;
background-color: #AAFFEE;
}
.content .main_news .main_news3{
height: 30px;
background-color: #AAFFEE;
}
.content .main_r{
float: left;
width: 190px;
height: 401px;
background-color: #F08080;
}
.content .main_nav{
float: left;
width: 650px;
height: 25px;
background-color: #99FF99;
}
/*footer开始*/
.footer{
overflow: hidden;
width: 970px;
height: 35px;
background-color: #99BBFF;
}
</style>
</head>
<body>
<!-- header开始 -->
<div class="header inner_c">
<h1 >logo</h1>
<div class="lang mb8">English</div>
<div class="nav">导航</div>
</div>
<div class="cl h10"></div>
<!-- header结束content开始 -->
<div class="content inner_c">
<div class="slide mr10"></div>
<div class="main_news mr10 mb10">
<div class="main_news1 mb10">1</div>
<div class="main_news2 mb10">2</div>
<div class="main_news3">3</div>
</div>
<div class="main_r"></div>
<div class="main_nav"></div>
</div>
<div class="cl h10"></div>
<!-- content结束footer开始 -->
<div class="footer inner_c"></div>
<!-- footer结束 -->
</body>
</html>