标准h5的定位_HTML5(H5)定位、浮动、display属性

定位

position属性来定义，他是相对于上级定位的，position也分relative相对定位和absolute绝对定位，默认是没有定位的。如果用position布局页面的话，使用left、top、left、bottom属性并设置以px为单位的值，如果嵌套的话可以使用，父级相对定位，子级绝对定位，俗称父相子绝。

上面所述relative相对定位是在当前文档流中，而fixed固定定位和absolute绝对定位则脱离当前文档流。脱离当前文档流后可以使用z-index调整得放顺序。

relative 对象遵循正常文档流

absolute 对象脱离正常文档流，使用top，right，left，bottom等属性进行绝对定位。如果不指定父级定位容器，将以浏览器窗口进行定位。

fixed 对象脱离正常文档流，使用top，right，left，bottom等属性以浏览器窗口为参考点进行定位，当出现滚动条是， 对象不会随之滚动。

浮动

float属性来定义，用于设置标签的左右浮动，浮动后的元素不在当前文档流中，需要清除浮动才能回到当前文档流，float的值 left左浮动，right右浮动。

浮动产生的影响：

1.自身的父元素无法获取宽高

2.后续的元素会自动补位

3.浮动会脱离当前文档流，覆盖标准流的元素

4.auto会失效

5.块元素可以横排显示(失去独占一行的特性)

6.行元素可以设置宽度和高度

7.除了auto以外，依然支持margin

8.提升半个层级 z-index

清除浮动的常见方法有以下几种：

1. 给父级设定宽高

缺点： 父级如果作为容器，直接就写死了，后续元素添加会出问题，而且无法解决元素重叠的问题    不推荐使用！ 了解即可

2. 使用overflow ：hidden 属性 (超出内容区域的部分，隐藏。给父元素添加

缺点：如果内容需要超出，或者较多时.需求发生冲突

如果内容没有超过，推荐使用。 较为方便

适用场景： 浮动元素较少.

3. 使用clear: both  属性;

clear: 是否允许浮动

left:  不允许左侧有浮动

right: 不允许右侧有浮动

both:  不允许两侧有浮动

缺点： 需要写一个空标签来绑定 clear属性.  这个空标签没有html的作用，不符合html标签语义化

4.  给父级设置 display: inline-block;

缺点:  父元素的同级之间会留有间隔

display

display默认属性为block，称为块元素，line为行元素，line-block为行内块元素，none影藏对象

块元素无论多大占一行，行元素只占自身大小位置。