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影藏对象

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