浮动总结

学习脉络：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不指定宽度，同浏览器一起宽