float布局——原文链接

清除浮动，clear：both；

定位布局的时候，通常情况下是在父级标签上设position:relative，在需要定位的层上设position:absolute；top：20px；left：10px；

relative使整体保留原本的位置，absolute使子元素位置发生改变（相对与父元素）,z-index控制元素层级。absolute设置/fixed设置-会脱离文档流，使原有位置不占位，后续元素补充，relative设置会保留原有位置，后续元素只能紧接其下！！！相同点都是：可以使用z-index属性改变层级。z-index正数继承父容器，负数脱离父容器，层级发生改变（相关文章）。

对父容器内所有元素设置absolute时，父容器不会被撑开，但子元素相对于父容器定位。

a标签只有设置display:block;之后才能和最大程度扩容！！

margin格式

布局Demo:

目的：研究float布局、position布局以及和其父容器的关系。

初始 *{margin:0;}

为HTML、body、boxBg、box？均添加1px边框

有几个特性：（1）容器式>父容器内含子元素

（2）子元素最大型扩容（在margin:0条件下）

设置宽高 出格现象

设置宽高之后元素大小发生改变并严格按照设定大小来。（出格现象说明：HTML和body是按照浏览器页面大小为基础的）

横向排列：

由于div是块级元素，所以框会按照文档流以纵（竖）向形式排列。框横向排列。有两种方式可以实现。

第一种：display:inline-block;

为box?设置display:inline-block; 效果

中间出现空白间隙，这并不是margin的问题，追溯到本质原因是元素之间的空白符引起的，所以在--父元素--设置fone-size的大小，可以调节空白缝隙的大小。

父元素font-size:0； 间隙消失，内容消失。

对子元素设置font-size：14px；即可解决——必须设置相同大小才可，否则会出现以下情况：

设置不同大小 结果

解决办法：设定position：relative;调整其top（以%式调整——麻烦！！！）——不行，当页面变动时其位置会发生改变（哭）

在试图解决过程中发现：position：relative、position:absoulte受页面大小影响。

浮动元素不占据空间，float时以紧邻模式使用，受父元素宽度限制，同时无法撑开父元素，浮动元素会影响行内文字，同时会浮动在其上方。

CSS的盒子层次问题（原文）

定位（除去static）>浮动>标准流

使用前提：必须有定位（除去static）---position属性要是relative，absolute或是fixed

                    给定z-index的值为层级的值（不给默认为0）

                        auto 默认。堆叠顺序与父元素相等。

number 设置元素的堆叠顺序。

inherit 规定应该从父元素继承 z-index 属性的值。

层级一样，后面的盒子比前面的层级高

以下问题：

* 1、父标签 position属性为relative；* 

* 2、问题标签含有浮动(float)属性；* 

解决方法也很简单： 

1、position:relative改为position:absolute； 

3、去除浮动（浮动元素添加position属性（如relative，absolute等）；）。 

覆盖问题