浮动

浮动： 默认的流式布局有不足。 浮动的目的就是为了让男标签可以并排显示。

格式：float: left / right / none

• none默认的不浮动

特点：

0. 浮动初衷是为了实现字围效果，后面发现浮动可以让多个块级元素并排显示。
1. 在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就向上排
2. 浮动并没有完全地脱离了标准文档流（破坏性--->flex），如果后面的元素内部有文字，这些文字会环绕在浮动元素的周围，产生字围效果。
3. 如果多个元素浮动，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。
4. 如果一个元素浮动，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。
5. 如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。
6. 如果元素浮动，那么它会造成父元素高度塌陷。解决办法:显示加高度（加高法） 小偏方overflow:hidden;
7. 如果元素浮动，它也会造成对后面的兄弟元素影响。解决办法：clear:both/left/right
8. 浮动的应用：实现左右布局、小导航、多个规则盒子水平排列（行内块）
9. 当一个浮动起来的男盒子，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性，
10. 如果一个元素浮动了，它会悄悄地做一个变性手术。如果一个女盒子浮动了，那么就可以设置宽高了，相当于把它变成男标签。
11. 如果父元素也浮动了，那么就不会出现高度塌陷了。
12. 如果有左浮动，又有右浮动，那么你需要把右浮动的元素写在左左浮动的前面 ??
13. 写三个盒子，利用27种情况去讨论最后的显示。
14. 浮动元素会从标准文档流中半脱离出来。证明：字围
15. 一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。

元素浮动会造成影响，清除浮动打方法：

1. 对父元素造成的影响: 父元素高度塌陷

• 解决：显示加高度（加高法）小偏方overflow:hidden clear:both

  1. 加高法：简单,基本不用,大部分情况情况下父元素的高度需要子元素撑起来
  2. overflow:hidden : 使用了overflow:hidden父元素的高度会随着子元素的高度变化而变化。 overflow:hidden本职工作是用来处理溢出.。 在使用过程中，需要注意子元素如果想要超出父元素高度，此时overflow:hidden就不适合了。
  3. clear:both:在所有子元素后面加一个空的div 在这个div上面加clear:both 优点：clear:both专业清除浮动的 缺点：多写一行代码

2. 对后面兄弟元素造成的影响：兄弟元素会向上移动

• 解决：

1. 在受影响的元素上面的加 clear:both
2. 项目中最常用清除浮动的方法：利用伪元素after

就是写一个清除浮动的类，如下：

.clear:after{
    content=""; 
    display:block; 
    clear:both; 
    height:0; 
    overflow:hidden;
}