常用CSS样式（二）——深入篇（浮动，定位）

今天，我们对CSS进行深入一点的学习，在层叠样式表（CSS）常用样式中，除了能够影响元素内容、大小、颜色等静态的状态外，还有能够影响元素布局位置的元素，让我们一起来学习一下吧！

float（浮动）

float（浮动）如字面意思一样，让元素盒子在文档流中浮动起来，给元素添加float样式后，会使元素脱离文档流、层级提升（如放在地面的盒子被拿起来，原本盒子所在的空间就空置出来了），元素不占用原先层级的空间，原本所占的空间会空置出来，给下一个元素使用。但是文本却不会被提升，如下图，我们可以发现它会紧跟在float盒子原本层级所占空间的后面；同时，我们可以发现给两个块盒（块元素盒子）设置float时，它们会排列在同一行。

    div:nth-child(1){
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;

    }
    div:nth-child(2){
        width: 200px;
        height: 200px;
        background-color:red;
        float: left;
    }
    div:nth-child(3){
        width: 400px;
        height: 400px;
        background-color: lightblue;
    }

多个块盒设置float可以让它们排列在同一行，那么，疑问来了：给多个行盒（行内元素盒子）设置float可不可以也让它们排列在同一行呢？我们来试试看。

span:nth-child(1){
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;

    }
    span:nth-child(2){
        width: 200px;
        height: 200px;
        background-color:red;
        float: left;
    }
    span:nth-child(3){
        width: 300px;
        height: 300px;
        float: left;
        background-color: lightblue;
    }

原来给多个行盒设置float也能让它们排列在同一行，同时还支持设置宽高，原因是：给元素设置float，浏览器会隐式把该行盒的display:inline改成display:block——块级元素的默认样式，把行盒变成了块盒，自然就支持设置宽高了

接下来，我们来看一张图：

咦！为什么父级的高度会是0？？

子级设置float会造成父级盒子高度坍塌，当我们页面出现多个布局分区时，父级的高度坍塌会造成整体布局的错乱，因此，我们需要清除父级的浮动，清除浮动的方法有很多，我常用的方法是：
.clearfix:after{ content: ""; clear: both; display: block; }
然后把.clearfix类选择器添加到父级中（当然，当我们给父级添加了宽高时，是不需要清除浮动的，不过保险来说，凡是子级设置了浮动，父级都应该清除浮动）

总结下float的影响及作用：

• 能让多个块盒在一行排列
• 能让行盒支持宽高的设置
• 是元素盒子脱离文档流
• 提升元素盒子的层级半层（只提升元素，不提升文本）

向右浮动（float：right）时，排列在同一行的盒子中，第一个盒子在最右边，依次推后
div{ float: right; width: 100px; height: 100px; border: 2px solid #000000; background-color: blueviolet; }

position（定位）

**position（定位）**能帮助我们在页面中把元素设置在我们想要的位置上，常用的poaition属性值有：relative、absolute以及fixed。它们有着不同的效果：

position：relative（相对定位）

相对定位a.不会影响元素本身的特性；b.不会使元素脱离文档流（也就是说，位置移动了，但是原本所占的空间不会本空置出来，依旧被该元素占据着）；c.当没有设置位置偏移量时，对元素没有任何影响；d.当设置位置偏移量时，依旧能是元素移动

    div{
        width: 100px;
        height: 100px;
        background-color: #ccc;
        border: 2px solid #000000;
    }
    div:nth-child(2) {
        position: relative;
        left: 100px;
        top: 0px; 
    }

可以看到，第三个盒子没有顶上占据第二个盒子原本的空间
同时，设置相对定位时，位置是相对于原本盒子位置来偏移的，文本也跟随着发生偏移

position：absolute（绝对定位）

绝对定位a.会使元素脱离文档流；b.会使行盒支持宽高的设置；c.会隐式把行盒变成块盒

 div{
        width: 100px;
        height: 100px;
        background-color: #ccc;
        border: 2px solid #000000;
    }
    div:nth-child(2) {
        position: absolute;
        left: 100px;
        top: 100px; 
    }

可以看到第三个盒子，占据了第二个盒子原本的位置（使元素脱离文档流）
位置偏移是相对于视窗来发生偏移的效果图位置偏移发生异常，是因为body有个默认样式：margin：8px；

是不是所有位移都相对视窗来发生偏移呢？当我们给盒子父级添加相对定位时，会发生什么呢？

.father{
        position: relative;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        border: 2px solid #000000;
    }

    .father div{
        position: absolute;
        left: 50px;
        top: 0px;
        width: 100px;
        height: 100px;
        background-color: #ccc;
        border: 2px solid #000000;
    }

可以看到，如果父级添加了相对定位，添加了绝对定位的子级发生偏移时，是相对于父级发生偏移的。

捣鼓之后，发现了一些有趣的东西：

1、当给元素同时设置绝对定位和浮动时，浮动不会其效果，不会排列在同一行；
2、给元素添加了绝对定位，但是不设置位置偏移量时，元素同样会脱离文档流，当父级有文本时，元素盒子会排列在文本的下一行，而不像浮动，文字实在浮动盒子同一行的后面；

fixed（固定定位）

fixed（固定定位）常用语布局页面旁边的小导航模块，如果元素添加了fixed（固定定位），无论窗口怎么滚动，它也不会移动，好像固定在了页面上一样。对元素，它有着和绝对定位相同的影响和作用，不同的是，固定定位是相对于视窗来发生偏移的，无论父级有没有相对定位，也不影响偏移。

.father div:nth-child(2){
        width: 100px;
        height: 500px;
        top: 0;
        right: 50px;
        background-color: cadetblue;
        position: fixed;
    }