关于浮动的认识
在这之前首先要知道什么是标准文档流
1.在web页面中, 我们无法像设计软件制图一样, 想画哪里就画哪, 这因为web页面制作是一个流, 必须从上而下制作,
2.在web页面制作中, 我们将这种流, 称为标准文档流; 并且还具有一些特征：
a) 空白折叠现象
b) 高矮不齐, 底边对齐
c) 有的标签只有在一行写不下, 才会自动换行
d) 还分有的标签会自动换行
浮动是css中, 从事布局工作的, 使用最频繁的属性
浮动的元素脱标;
脱标就是去除标准文档流的限制, 比如:
1.浮动的元素可以并存一行;
2.并且可以设置宽和高（行内元素也可以）
##
浮动的理解:
其实浮动一开始的意义是文本围绕图片，也就是我们常说的文字环绕效果。
我们的理解: 一个元素, 当添加浮动属性, 他就到了上一层画布, 如果是left则往左飘, 但是有一个方向是默认的, 是向上;
一般情况下，如果浮动元素前定义了一个兄弟元素，那么浮动元素换行显示。
浮动脱标, 脱标之后, 就不占有标准文档流的空间,
注意: 一个浮动的标签的结构之前有个标签是标准文档流, 则无论如何, 都不会覆盖该标准文档流标签!
##
相同方向的浮动元素会互相贴靠
连续浮动的元素, 只要有足够的空间, 会相互贴靠, 没有足够的空间, 则再起一行
结构：<div class="father"><div class="box1">box1</div><div class="box2">box2</div></div>
<style type="text/css"> .father{ width: 200px; height: 200px; border: 1px solid #000; } .box1{ width: 150px; height: 50px; background-color: orange; float: left; } .box2{ width: 100px; height: 100px; background-color: tan; float: left; } </style>
结果如图：
浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高
给一个box里放两个小box，box1（float:left），给box2设置一个margin-top属性，看box1是否会跟随box2下来。
<style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 300px; height: 300px; margin: 50px auto; border: 1px solid black; } .box1{ width: 100px; height: 100px; background-color: orange; float: left; } .box2{ width: 200px; height: 200px; background-color: tan; margin-top: 10px;
/* 没有父元素边框限制，浮动元素会随着一起往下 有父元素的限制，浮动元素紧贴着父元素边框，不会往下掉 */ } </style>
有父元素边框限制→ 
无父元素： 
没有父元素的限制，box1不能比box2高，所以box1跟随box2下来
清除浮动的几种方式：
清除浮动的方式一:
主动给父盒子添加高度, 这是因为没有高度的父盒子, 是关不住浮动的儿子对其他元素的影响
但是, 考虑到代码的字节量, 我们基本上不用主动设置父盒子高度
清除方式二:
clear: both; 使用该属性就可以清楚浮动带来的影响
clear:both 这个属性写在被影响的父盒子里, 但是有个bug, margin-top失效
清除方式三: 隔墙法(很重要!)
1.外墙法
通过增加一个div 并且给这个div添加 clear:both; 属性, 代码示例如下:
div.qiang{ clear:both; }
并且能够给这个强添加高度, 去隔开上下两个模块, 但是有bug, 老ie只能解析高度最小为12的盒子, 可以通过设置_font-size: 1px;
2.内墙法
代码示例如下:
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<div class="qiang"></div>
</ul>
就是把墙移到了父盒子里
本质上, 是让父盒子有高度, 就可以管住儿子的浮动给其他元素带来的影响
清除浮动方式四: overflow:hidden
Overflow:hidden 本意是溢出隐藏, 但是我们在使用的过程中, 发现, 如果给一个盒子添加overflow:hidden属性 那么 这个盒子从此有了高度! 就可以管住儿子的浮动给其他元素带来 的影响
