H5+CSS基础总结（2）

一、浮动

1.认识浮动

浮动是网页布局的方式之一，它最大的特性是脱标，意思就是不会保留当前位置，使后面的标准流盒子能够挤上来（只会影响后面的标准流），所以在一个大的标准流盒子中，只要有一个子盒子设置了浮动，其他子盒子也要设置浮动，不然就无法实现多个盒子排列在一行或者多行的布局。另外

2.清除浮动

在网页布局时，页面中的每个板块都会有一个最大盒子，我们一般都不会为其设置高度与宽度，因为一旦把高度和宽度定死，后续添加更多的内容时又要修改代码。而当一个没有高与宽的盒子里的子元素一旦有了浮动，该盒子高与宽就会变为0，后面的盒子就会挤上来。比如这样

因此必须清除浮动。方法有before/after伪元素法，代码如下

.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专用 */
*zoom:1;
}

除此之外，还可以在父元素添加overflow:hidden，但这会隐藏被省略的部分，所以不推荐。

二、定位

1.认识定位

定位通常用于摆放盒子，将其置于页面任意位置，通常在设定完定位模式后，还要加边偏移，确定它的位置。定位有五种值

另外还有不常用的粘性定位sticky，在其边偏移达到设定值时，就会变成固定定位。

上述最重要的就是relative/absolute/fixed。绝对定位、固定定位不在占有原来的位置，也就是脱标，而相对定位不脱标，因此才有了子绝父相。也就是父盒子通常是相对定位，子盒子是绝对定位，这样就可以在父盒子里任意摆放子盒子。

2.应用

（1）绝对定位的盒子居中

（2）固定定位的盒子居中