CSS（3）布局

属性值	描述
both	同时清除左右俩侧浮动的影响
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）

方法

额外标签法（隔墙法）

最后浮动元素末尾，添加一个空的块级标签，对其设置样式。

语法：选择器{clear:both;}

优：通俗易懂，书写方便

缺：添加了许多无意义的标签，结构化比较差

父级添加overflow属性

给父元素添加overflow属性。

语法：选择器{overflow:hidden;}

优：代码简洁

缺：隐藏了溢出的部分

父级添加:after伪元素

额外标签法的升级版，给父元素添加。

给盒子添加了after伪元素，会在父盒子内最后新增一个盒子，盒子是行内元素，通过CSS生成盒子。

语法：

选择器:after{content:"";display:block;height:0;clear:both;visibility:hidden;}

//:after伪元素的写法，content是必须的，默认是行内元素必须转化块级，clear清除浮动

选择器{*zoom:1;}//CSS为了兼容IE6、7需要写的

优：没有增加标签，结构更简单

缺：照顾低版本浏览器

父级添加双伪元素

给父元素添加

before伪元素是在父盒子里最开始生成一个盒子，after伪元素是在父盒子里最后面生成一个盒子。

语法：

选择器:before,选择器:after{content:"";display:table;}//display把模式转换为表格

选择器:after{clear:both;}

选择器{*zoom:1;}

优：代码更简洁

缺：照顾低版本浏览器

定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

某个元素可以自由在一个盒子内移动位置，并且压住其他盒子。

定位=定位模式+边偏移

特性

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

块级元素添加绝对或者固定定位，如果不给宽高，默认大小是内容的大小。

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题，因为它们都脱离标准流了。

绝对定位（固定定位）会完全压住盒子，压住下面标准流所有的内容；浮动元素只会压住下面标准流的盒子，但是不会压住下面标准流盒子里的文字（图片），这是因为浮动最初的目的是用来文字环绕。

定位模式

指定一个元素在文档中的定位方式。通过CSS的position属性来设置。

属性值	语义	用法	脱标	描述
static	静态定位	position:static;	否	元素默认定位方式，无定位
relative	相对定位	position:relative; （+边偏移）	否	元素相对于原来的位置，来移动
absolute	绝对定位	position:absolute; +边偏移	是	元素相对于它祖先元素，来移动
fixed	固定定位	position:fixed; +边偏移	是	浏览器页面滚动时元素位置不会改变
sticky	粘性定位	position:sticky; +边偏移	否	元素开始随着页面滚到，到某个位置固定在页面不动

静态定位（static）

按照标准流特性摆放位置，没有边偏移。很少使用。

相对定位（relative）

参照点：自己原来的位置

不脱标：原来在标准流的位置，继续占有。后面的盒子仍然以标准流的方式对待它。

绝对定位（absolute）

参照点：最近一级的带有定位的祖先元素。

如果没有祖先元素或者祖先元素没有定位，以浏览器为准进行定位。

如果祖先元素有定位（相对、绝对、固定定位）（静态定位不可以）（一般是相对定位），则以最近一级的有定位的祖先元素做为参考点移动位置。

脱标：绝对定位不再占有原先的位置。

固定定位（fixed）

可以看作特殊的绝对定位。

参照点：浏览器的可视窗口

位置和父元素没有关系，不随滚动条滚动。

脱标：固定定位不再占有原先的位置。

粘性定位（sticky）

可以认为是相对定位和固定定位的混合。

参照点：浏览器的可视窗口（固定定位的特点）

不脱标：占有原先的位置（相对定位的特点）

和页面滚动搭配使用，兼容性差

边偏移

决定了该元素的最终位置。

示例：top:20px;

属性	语义	描述
top	上	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	下	底部偏移量，定义元素相对于其父元素下边线的距离。
left	左	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	右	右侧偏移量，定义元素相对于其父元素右边线的距离。