浮动
非IE浏览器下，容器不设置高度且子元素浮动时，容器高度不能被撑开。此时，内容会溢出到容器外面影响布局
浮动的工作原理
浮动元素脱离文档流，不占据空间（引起“高度塌陷”）
浮动元素碰到包含它的边框或者其它浮动元素的边框停留
浮动元素可以左右移动，知道遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，但元素浮动之后，不会影响块级元素的布局，只会影响内联元素的布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”
浮动元素引起的问题
父元素的高度无法撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若浮动的元素不是第一个元素，则该元素之前的元素元素也要浮动，否则会影响页面的显示结构
清除浮动的方式
给父级元素设置高度
最后一个浮动元素之后添加一个空div标签，并添加clear: both样式
包含浮动元素的父级元素添加overflow: hidden或overflow: auto样式
使用 ::after 伪元素
使用clear属性清除浮动
