html中页面布局—浮动

folat:浮动
none:不浮动，默认
left:向左浮动
right:向右浮动
auto:根据自身所占位置，自动居中
1）、自身必须有宽高
2）、inline-block或folat都会使auto失效
3）、需要填写具体值来调整元素位置

浮动产生的影响：
1）、自身的父元素无法获取宽高
2）、后续的元素会自动补位
3）、浮动会脱离当前文档流，覆盖标准流的元素
4）、auto会失效
5）、块元素可以横排显示（失去独占一行的特性）
6）、行元素可以设置宽和高
7）、除了auto以外，依然支持margin
8）、提升了半个层级z-index（后续会讲到）

使用浮动布局，那么一定要清除浮动，否则会很严重！！！页面会爆炸！！
清除浮动的常见方法有以下几种：
1）、给父级设置宽高
缺点：父级如果作为容器，直接写死了，后续元素添加会出现问题，而且无法解决元素重叠的问题
2）、使用overflow:hidden属性（超出内容区域的部分，隐藏）给父元素添加
缺点：如果内容需要超出，或者较多时，需求发生冲突；如果内容没有超出，推荐使用，较为方便
使用场景：浮动元素较少时

<div id="main" style="o