浮动：默认的流式布局有不足。浮动的目的就是为了让男标签可以并排显示。
格式：float：left / right / none none默认的不浮动
一、浮动的特点及演示：
浮动初衷是为了实现字围（新闻），后面才发现，浮动可以让多个男标签并排显示。
- 在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排
前
- 浮动并没有完全地脱离了标准文档流（破坏性--->挠曲），如果后面的元素内部有文字，这些文字会环绕在浮动元素的周围，产生字围。
前
- 如果多个元素浮动了，那么他们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。
前
- 如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。（图示为右浮动）
前
- 如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。
前
- 当一个浮动起来的男盒子，没有设置宽度，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性
前
- 如果一个元素浮动了，它会悄悄地做一个变性手术。如果一个女盒子浮动了，那么就可以设置宽高了，相当于把它变成男标签。（这里用span来演示）
前
- 一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。
前
二、元素浮动造成的影响
1.父子元素：子元素浮动会造成父元素高度塌陷（前提：父元素未设高度）
解决方法：①显示加高法：padding-top（不推荐）
②溢出隐藏：overflow:hidden
注意：父元素的高度会随着子元素的高度变化而变化溢出；
在使用过程中，需要注意子元素如果想要超出父元素高度，此时溢出就不适合了。
③常定义清除浮动的伪类，内容为
.clear:after{
content: "";
clear: both;
display: block
}
2.兄弟元素：上一个元素浮动后，下一个元素会上移
解决方法：在下一个元素中加入clear:both
