HTML，浮动与定位，超详细！！

前言：通过设置CSS中的浮动与定位样式实现网页的合理排版

元素的浮动

浮动属性

语法：选择器{float:属性值;}

属性值	说明
left	向左浮动
right	向右浮动
none	不浮动(默认)

清除浮动

语法：选择器{clear:属性值;}

当浮动元素没有占据完整个一行，下一行的浮动元素就会被影响，所以下一行的浮动元素中的CSS样式要清除浮动

属性值	说明
left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	同时清除元素左右两侧浮动的影响

特别的，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响

常用的方法：给父元素添加CSS样式：overflow:hidden;

规范溢出内容

语法：选择器{overflow:属性值;}

属性值	说明
visible	none，内容不会被修剪，溢出到元素框外
hiddle	溢出内容被修剪，且不可见
auto	产生滚动条，自适应所要显示的内容
scroll	溢出内容被修剪，且浏览器始终显示滚动条

元素的定位

定位属性

语法：选择器{position:属性值;}

属性值	说明
static	静态定位(none)
relative	相对定位，相对于其原文档的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位，否则依据body定位
fixed	固定定位，相对于浏览器窗口进行定位(无论如何拉动滚动条都会在固定的位置)

边偏移

精确定位

属性值	说明
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底端偏移量，定义元素相对于其父元素下边线的距离
left	左端偏移量，定义元素相对于其父元素左边线的距离
right	右端偏移量，定义元素相对于其父元素右边线的距离

position:relative;  //相对定位
left:50px;		//距左边线50px
top:10px;		//距上边线10px

层叠属性

如果给多个元素设置定位时，定位元素之间可能会发生重叠

语法：z-index:属性值;

属性值可为正整数，负整数，0，默认值是0，取值越大，定位元素在层叠元素中越居上

该属性仅对定位元素生效