学习脉络：why -> how -> 特点 -> 特殊 -> 应用
----- 1 为什么需要浮动？-----why
- 如何把div显示到同一行？
若使用行内块元素中间会有一个缝隙。 - 如何左青龙右白虎？
网页布局第一准则，多个块级元素纵向排列用标准流，多个块级元素横向排列找浮动。
----- 2 什么是浮动 ----- how
float ： none | left | right ， 移动到一边，直到左边缘或右边缘或者另一个浮动的边界。
----- 3 浮动的排列特性----- 特点
- A 脱标
- a 脱离标准流配置
- b 不再保留位置
- B 一行内显示且顶部对齐
- C 具有行内块元素特性
- a 添加浮动后，可以直接给高度和宽度
- b 没有设置宽度，和内容一样宽
----- 4 特殊一 浮动两个注意点----- 特殊
- A 浮动不会影响前面的标准流
- B 一浮全浮动
----- 5 特殊二 清除浮动 ----- 特殊二（带全套流程）
----- 501 为什么需要清除浮动-----why
A 京东精选页面，不一定有多少产品，父元素给不了高度
B 文章页面，文章长度不一定，父元素给不了高度
如何让子盒子撑开父元素呢？ 清除子元素的浮动就可以了。
----- 502 清除浮动的方法-----
- A 额外标签法（隔墙法） ：最后一个标签后添加 一个空的div 样式设为 clear:both
- B 父元素overflow，在父元素中添加overflow:hidden
- C after 伪元素
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden
}
.clearfix{
*zoom:1;
}
- D 双伪元素
.clearfix:before,
.clearfix:after{
content:";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
----- 应用------
- A 搭配标准流父元素
- a 父元素设置div大小，子元素浮动在div 内
- B 仿小米导航栏左右布局
- C 仿小米手机，右边8个div
- D 常见网页布局
- a top和footer不指定宽度，同浏览器一起宽
