08浮动样式
（1）由来
首先了解一下默认元素标准流。
普通流规则： 浏览器在默认情况下规定一个块元素在父元素内的排列规则：
- 从上往下排列
- 从左开始排列
- 一个块元素占一行
为了更好的排版布局，开始脱离标准文档流，使用浮动样式。
（2）原理
注1:设置了浮动样式的元素不再遵守普通流规则，因此两个浮动的元素可以在同一行显示。
注2：当父元素的宽度不足以放下所有的浮动元素时，那么超出父元素边界的元素会自动换行显示。
注3：浮动元素之间不会覆盖彼此。
注4：具有和文本环绕相同的特性，一个浮动元素后面的行内元素会首先按照文本环绕效果进行排列。
（3）行内元素浮动样式设置
正常情况下，图片与文本基线对齐，如图
浮动后:当前文本无浮动，文字会在标准流控制下，所以相比更靠上。
（4）浮动样式父元素高度塌陷
①出现原因：当父元素没有固定高度并且所有的元素都浮动起来
②出现的问题：
正常情况下，3个第div块浮动，如图所示：
当窗口缩小后：图中黄色区域（之前紫色区域）无法满足紫色div大小，就掉下去了。
③解决方案：
第一类：让父元素BFC化（当父元素形成BFC时, 父元素就具有了包裹性。可简单理解为,父元素有了一个虚拟的框(此时子元素的外边距不再会和父元素的外边距合并), 父元素的宽高由里面还在平面上的元素和漂浮的元素一同撑开,）
- overflow:hidden;
- display:inline-block;
- float:left;
- position:adsolute;
第二类：利用一个幽灵元素来清除浮动（不建议使用），手动撑开父元素的高度。
- 新建一个空的块元素，并给他设置clear:both属性（破坏页面的文档结构）
- 使用伪元素生成一个幽灵元素，并设置clear:both属性。
关于clear样式：（即清除浮动）
left:左侧抵抗浮动；right：右侧抵抗浮动；both：两边都抵抗浮动。