前言
浮动作为CSS中常用的布局方式，本文将详细介绍浮动内容
定义
【float浮动】
浮动元素会脱离普通流，然后按照指定的方向，向左或向右移动，直到碰到父级边界或另外一个浮动元素
【值】left | right | none | inherit
【继承性】无
【特性】
【1】浮动流
正常流中的元素一个接一个排列，浮动元素也构成浮动流
【2】块级框
浮动元素自身会生成一个块级框，不论这个元素本身是什么，使浮动元素的周围的外边距不会合并
【3】包裹性
浮动元素的包含块是指其最近的块级祖先元素，后代的浮动元素不应该超过包含块的上下右边界。
若不设置包含块的高度，包含块若浮动，则包含块会延伸，进而包含所有的后代浮动元素；
若不设置包含块的宽度，包含块若浮动，则包含块的宽度由后代浮动元素撑开
【4】破坏性
浮动元素脱离正常流，并且破坏了自身的行框属性，使其包含块元素的高度塌陷，使浮动框旁边的行框被缩短，从而为浮动框留出空间，行框围绕浮动框重新排列
【表现】
【1】浮动元素的左（右）外边界必须是源文档中的之前出现的左浮动（有浮动）元素的右（左）外边界。除非后出现浮动元素的顶端在先出现浮动元素的底端下
【2】左浮动元素的右外边界不会再其右边右浮动元素的左边界的右边。
【3】左（右）浮动元素左边（右边）有一个浮动元素，前者的右外边界不能再其包含块右（左）边界的右边（左边）
【4】浮动元素的左（右）外边界不能超出其包含块元素的左（右）外边界
【5】一个浮动元素的顶端不能比其父元素的内顶端高。若果一个浮动元素在两个合并外边距之间，防止这个浮动元素时相当于在两个元素之间有一个块级父元素
【6】浮动元素的顶端不能比之前所有浮动元素怒或块级元素的顶端更高
【7】浮动元素必须尽可能高的放置
【8】左浮动元素必须向左尽可能远。位置越高，就会浮动的越远
【重叠】
浮动元素超出父元素边界的方法有两种：
1.浮动元素的宽度大于父元素的宽度
2.设置负外边距。如果浮动元素存在负外边距，则浮动元素和正常流元素重叠
【1】行内框和一个浮动元素重叠时，其边框、背景、内容都在该浮动元素之上显示
【2】块级框和一个浮动元素重叠时，其边框和背景在浮动元素之下显示，内容在浮动元素之上显示。