14.HTML盒子的浮动、塌陷、定位

        浮动定位是网页中最为重要的定位方式

        所谓的盒子，就好比父元素内含有子元素，那么父元素就是子元素的盒子。

        子元素会撑开父元素的大小，而父元素内没有子元素(不手动设置宽高)时，大小为0*0

        而浮动则指的就是脱离父元素，可以理解为漂浮到在父元素相应位置的上方

        而父元素内没有了子元素的存在，大小就会压缩成0*0，也就造成了浮动塌陷

---

盒子浮动：

        属性：float:none / left / right ;

参数	说明
none	默认值，表示元素没有浮动
left	表示元素会漂浮至父级元素左侧
right	表示元素会漂浮至父级元素右侧

---

清除盒子塌陷：

        1.对父级元素设置合适的宽高，清除浮动塌陷

        2.新建自己元素，使用clear:both;属性定义该元素，清除父级元素的浮动塌陷

        3.在父类元素中定义overflow:hiddem;属性来清除浮动塌陷

---

盒子定位(position)：

静态定位	position的默认值，表示CSS文档流定位，元素框正常生成。就是按照正常的布局流从上到下、从左到右布局，平常设计网页时没有指定position，也就表示使用position:static;
相对定位	相对定位是相对于标签在标准文档流中的初始位置重新定位 在设置过position:relative;属性后 通过设置top:(+-数值)xp或left:(+-数值)xp来设置位置
固定定位	固定定位是生成绝对定位的元素，相对浏览器窗口的定位。 在设置过position:fixed;属性后 通过设置top:(+-数值)xp或left:(+-数值)xp来设置位置 设置固定定位的标签即使窗口滚动它也不会移动
绝对定位	绝对定位可以将指定的标签放置在绝对坐标位置上，绝对定位使标签的位置与文档流无关，因此不占空间，可以浮在网页上。 使用position:absolute;属性设置

---

堆叠顺序：

        z-index

        使用z-index来设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠属性角度的元素的前面。

        例：z-index:-1;