html的position布局,网页html+css布局float/position方式介绍

网页html+css布局中如果不添加任何样式的话默认的是遵循css规则自动靠左的。这种方式在很多排版样式中是不能达到要求的，网页html+css布局有float/position/table/Flex/Grid五种方式，今天模板社小编给大家介绍下float/position两种方式。

一、float

网页布局中最常见的方式，只有2个属性flost:left|right；常用于左右布局(图一)和等高等宽的列表(图二)中，如下图所示。

这种布局方式对元素宽度和高度比较敏感，即使1px的误差布局也会出现错位问题。图一中左栏和右栏及其中间宽度总和如果大于父元素的总宽度，右栏会被挤到下部出现错位；图二中如果某个浮动的子元素高度不同的话会影响下排元素的排列出现错位；这些问题要特别注意。

二、position布局

网页布局中另外一种常见的方式，有5个属性position:relative|absolute|fixed|static|inherit；网页布局中常用前3种。

position:relative-生成相对定位的元素，相对于其正常位置进行定位，多配合absolute使用。多用于设置absolute属性元素的父元素中，配合子元素定位使用；如下图所示左右布局，如果左右宽度都是固定或者按百分比可以用浮动float实现，如果左边图片宽度是固定值，右边宽度自适应，使用float的话有可能会出现错误问题，这时使用position布局relative|absolute即可实现要求。

代码展示：

.item{position:relative;width: 100%;}

.item .img{width: 200px;height: 150px;}

.item .con{position:absolute;top:0px;right:0px;left:210px;bottom:0;}

position:fixed-生成绝对定位的元素，相对于浏览器窗口进行定位。常用于网站头部(鼠标向下翻页时网站头部导航固定不动)、手机网站底部(手机站底部导航菜单)、左右客服悬框。

例如百度手机站，网页下翻时，网站头部固定顶部位置。底部图标和下载固定底部，右下角返回顶部图标，这3部分均使用的是position:fixed定位，头部设置top:0；底部部设置bottom:0；右侧设置right:0；