9.CSS笔记：浮动、布局、定位属性

本系列内容由ZouStrong整理收录

整理自《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com

一.浮动

1. float属性

作用：指定元素浮动方式
默认值：none
适用于：所有元素
继承性：无
动画性：无
取值：none（不浮动）、left（左浮动）、right（右浮动）

示例：

p {float:left;}

浮动注意事项

浮动元素会从正常的文档流中删除（脱离正常文档流，因此会让父元素不能被撑开）
一个元素浮动时，其他的文本内容会环绕该元素（通常都是图片浮动后，文字环绕）
浮动元素的垂直外边距不会与其它任何外边距合并
浮动元素要设置宽度，否则该元素宽度可能趋于0
浮动元素会生成一个块级框，会像块级元素一样表现（没有必要再为浮动元素声明display:block了）
虽然浮动适用于任何元素，但是对于绝对定位和固定定位元素来说，浮动无效

浮动基本规则：

左浮动元素的左外边界不会超过其父元素的左内边界；右浮动元素的右外边界不会超过其父元素的右内边界
左浮动元素的左外边界必须是之前出现的左浮动元素的右外边界，右浮动元素的右外边界必须是之前出现的右浮动元素的左外边界，除非该行不足以容纳该浮动元素（这条规则可以防止浮动元素彼此“覆盖“）
左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边，右浮动元素的左外边界不会在其左边左浮动元素的右外边界的左边（这条规则也为了防止浮动元素彼此“覆盖“）
一个浮动元素的顶端不可能比其父元素的内顶端更高
浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高
浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高

2. clear属性

作用：清除浮动
默认值：none
适用于：块级元素
继承性：无
动画性：无
取值：none、left、right、both

示例：

p {clear:both;}

当元素未设置高度时，元素的高度由其子元素或者文本内容决定

当子元素浮动时，子元素脱离了常规文档流，父元素就不能被撑开了，父元素下边的其他元素也会跟着向上“浮”，占据上面的子元素应该占据的位置，那么，这时就需要清除浮动了

方法-1：父元素也设为浮动

治标不治本，可能会产生新的浮动问题

方法0：父元素设置height

原理：显式设置高度来恢复父元素所占的空间
优点：简单好理解
缺点：没有从本质上解决问题，只适合固定高度的容器

方法1：加空标签，然后使用clear清除浮动

<div>
    <div class="float">浮动元素</div>
    <div class="clear"></div>
</div>

.clear {clear : both;}

原理：利用CSS的clear:both达到清除浮动的目的
优点：浏览器支持好，简单
缺点：需要添加额外标签，不符合语义

方法2：伪元素 :after

.clearfix:after { display: block ; content:" " ; clear: both;}
.clearfix{zoom : 1;}  
/*IE6，7不支持:after，但只写上zoom就万事大吉了*/

原理：利用CSS的 clear:both达到清除浮动的目的
优点：浏览器支持好（目前大型网站都有使用）推荐使用，建议定义公共类（一般都是clearfix），以减少CSS代码
缺点：代码多，要两句代码结合使用，才能让所有浏览器都支持

方法3：父容器设置overflow值hidden或auto

.cont1 {overflow : hidden; width:100%；zoom:1 }  
/*width或者zoom出现其一即可，否则IE6不支持（触发IE6的layout）*/

原理：overflow后，父元素要自动计算自己的高度来容纳子元素
优点：浏览器支持好，简单，代码量少
缺点：不能和position配合使用，超出的尺寸会被隐藏（auto则会出现滚动条）

方法4：父容器设置display: inline-block

.cont1 {display : inline-block;}

原理：未知
优点：浏览器支持好，简单，代码量少
缺点：父元素下方会额外产生一点点间距，对于精度要求很高的页面就不要使用了

注：最后注意，哪些是应用在父元素上的，哪些是应用在浮动元素本身上的

二. 布局

1. display属性（CSS3有改动）

作用：设置元素的显示方式
默认值：inline
适用于：所有元素
继承性：无
动画性：无
取值：none、inline、inline-block、block......

取值分析

none：隐藏元素（该元素所占的空间不会保留）

inline：转换为行内元素

block：转换为块级元素

inline-block：转换为行内块级元素

list-item：转换为列表项

table：转换为表格（类似于<table>）

inline-table：转换为表格（类似于<table>）

table-caption：转换为表格标题（类似于<caption>）

table-cell：转换为表格单元格（类似于<td>）

table-row：转换为表格行（类似于<tr>）

table-row-group：转换为表格行组（类似于<tbody>）

table-column：转换为表格列（类似于<col>）

table-column-group：转换为表格列组（类似于<colgroup>）

table-header-group：转换为标题组（类似于<thead>）

table-footer-group：转换为表格脚注组（类似于<tfoot>）

run-in（CSS3）：根据上下文决定元素是行内还是块级

box（CSS3）：将对象作为弹性伸缩盒显示（最老版本）

inline-box（CSS3）：将对象作为行内块级弹性伸缩盒显示（最老版本）

flexbox（CSS3）：将对象作为弹性伸缩盒显示（过渡版本）

inline-flexbox：（CSS3）将对象作为行内块级弹性伸缩盒显示（过渡版本）

flex（CSS3）：将对象作为弹性伸缩盒显示（最新版本）

inline-flex（CSS3）：将对象作为内联块级弹性伸缩盒显示（最新版本）

小结

display改变的只是元素的显示角色，而不是本质

inline-block值得一提，inline-block到底是行内还是块级呢？

可以这样理解：当对inline-block本身应用样式时，它就相当于块级元素，因此可以使用text-indent，text-align、width，height等

当被作为内容应用样式时，例如在父元素上，它就相当于行内元素，因此可以被text-align或者vertical-align控制

当使用JS将元素设置为不可见，又怎么让它按照原来的元素形态显示呢？

div.style.display="none";

只需不指定任何值即可

div.style.display=""; /*恢复元素本来形态*/

2. visibility属性

作用：指定元素的可见性
默认值：visible
适用于：所有元素
继承性：有
动画性：是
取值：visible（可见）、hidden（隐藏）、collapse（隐藏表格的行或列，作用等同于hidden）

与display属性不同，设置元素不可见时，元素占据的位置将会保留

但，与display:none相同的是，两者对于屏幕阅读器来说都是不可见的

所以如果仅仅是为了隐藏某些不希望被看到的元素，但是可以被屏幕阅读器看到，就可以

position:absolute;
left:-10000em;
top:-10000em;

3. overflow-x和overflow-y属性（CSS3有改动）

作用：指定元素处理溢出的方式
默认值：visible
适用于：块容器，伸缩盒容器，grid容器
继承性：无
动画性：否
取值：visible、hidden、scroll、auto（按需出现滚动条）、以及CSS3新增的paged-x、paged-y等

4. 简写overflow属性（CSS3有改动）

作用：指定元素处理溢出的方式
默认值：visible
适用于：块容器，伸缩盒容器，grid容器
继承性：无
动画性：否
取值：visible、hidden、scroll、auto（按需出现滚动条）、以及CSS3新增的paged-x、paged-y等

三. 定位

定位决定了元素在页面上的位置，所有元素都有position属性

1.position属性（CSS3有改动）

作用：指定元素的定位方式
默认值：static
适用于：所有元素
继承性：无
动画性：无
取值：static、relative、absolute、fixed

static值

静态定位（所有元素的默认方式），元素遵循常规文档流

relative值

相对定位，元素遵循常规文档流，并且参照定位环境（自身）通过left、right、top、bottom属性来调整元素位置

其默认的位置仍然保留，并且其移动不影响常规流中的其他元素

absolute值

绝对定位，元素脱离常规文档流，并且参照定位环境（见下面）通过left、right、top、bottom属性来调整元素位置

其默认的位置不再保留，就好像该元素不存在一样，并且其移动不影响常规流中的其他元素，其margin也不与其他margin折叠

使用了absolute值，相当于对元素设置了display : block（类似于float）

对于绝对定位来说，定位环境就是设置了position属性（static值除外）的最近的祖先元素，如果都没有设置，则定位环境是body元素

fixed值（IE6不支持）

固定定位的表现完全相同于绝对定位，唯一不同的就是定位环境是浏览器窗口本身

center值（CSS3）

page值（CSS3）

sticky值（CSS3）

2.left、right、top、bottom属性

作用：指定元素的偏移位置
默认值：auto
适用于：设置了position属性(static值除外)的元素
继承性：无
动画性：有
取值：auto、所有长度值（百分数时，相对于包含元素的宽度和高度）

四个值是可以同时使用的，例如当元素宽高未定义时，同时使用这四个值，将会隐式决定元素的宽高

left:0; right:0; top:0;bottom:0; /*把一个未定义宽高的元素，拉伸为与定位环境同宽高*/
left:0; right:50%; top:0;bottom:0; /*把一个未定义宽高的元素，拉伸为与定位环境半宽同高*/

如果设置了宽度和高度，同时使用四个值时，则会忽略right和bottom值

元素绝对定位和固定定位时，如果除bottom以外的任意偏移值设置为auto，会有一种特殊的行为，那就是设置为auto的值，会相对于自己以前的位置来定位（其实就是位置不变，但是移出了文档流）

绝对定位和固定定位的元素，水平居中，仅仅使用margin:0 auto;已经不行了，还应该将left和right设为两个相同的值（只要这两个值和绝对定位元素所占的宽度加起来小于定位环境的宽即可）

垂直居中的话，只要使用margin:auto 0; 然后将top和bottom设为两个相同的值即可

margin:auto; left:0; right:0; top:0;bottom:0;
/*垂直水平全居中,IE6/7不支持*/

绝对定位的元素在top,right,bottom,left属性未设置时，会紧随在其前面的兄弟元素，但不影响常规流中的任何元素，所以可用来做时间紧随标题效果

a {float: left;margin-right: 100px;  }
span {position: absolute;margin-left: -100px;}

3. z-index属性

作用：指定元素的层叠级别
默认值：auto
适用于：设置了position属性(static值除外)的元素
继承性：无
动画性：有
取值：整数（包括负数、无单位），auto

定位元素的层叠顺序，默认是按照元素在文档中出现的顺序决定，后出现的元素覆盖在先出现的元素上

z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文

每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定（每个元素仅属于一个层叠上下文）

同一个层叠上下文中，层叠级别（即z-index属性值）大的显示在上面，反之显示在下面

同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。

不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。

当z-index未定义时，在IE6，7下会创建新的局部层叠上下文，而在高级浏览器中，按照规范不产生新的局部层叠上下文

4. clip属性（CSS3新增，过渡）

作用：设置元素的可视区域
默认值：auto
适用于：绝对定位和固定定位元素
继承性：无
动画性：有
取值：auto、rect(top,right,bottom,left)、inset()

4. clip-path属性（CSS3新增，最新）