qtablewidget 实现浮动选择框_精讲定位与浮动FCC快报（三）

“ Live as if you were to die tomorrow. Learn as if you were to live forever.”

    嚯，欢迎，这一期我们来聊聊元素的定位和浮动，有点难度但是布局却是非常实用的。

    FCC主题：应用视觉设计

    FCC关卡：更改元素的相对位置-使用 float 属性将元素左浮动或右浮动

    到点了，上编译器吧！

01

—

定位

       我们先安排两个盒模型和一些基础的样式：    

class="box top">盒子上

class="box bottom">盒子下

    .box {      width: 100px;      height: 100px;    }    .top {      background-color: blue;    }    .bottom {      background-color: yellow;    }

    这里实现的效果如下：

     常见的定位一般有三种：relative、absolute、fixed。

    我们依次看一下，首先是relative，如果一个元素的position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。当然，如果设置了偏移的方向，那么元素将从当前位置，向设置的属性相反的方向偏移。

    .top {      background-color: blue;      position: relative;      top: 50px;    }

    absolute定位会将元素从当前的文档流里面移除即脱离文档流，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。具体定位需要参考设置了position：relative；的最近的父元素，如果没有就继续往上寻找直到body标签。在下面的例子中我们就是直接参考了body标签进行位移。

    .top {      background-color: blue;      position: absolute;      top: 50px; /*向下移动了50像素，可以理解为距离上面的距离*/    }

    好了，到这里我们就能看出来两者的区别了。relative由于元素并没有脱离文档流，所以其它元素(黄色盒子)依然待在它原本的位置，只有设置了relative的盒子(蓝色盒子)在移动，这也说明了其不会影响其他元素的特性。而设置了absolute的元素由于脱离了文档流，其原本的位置就会被别人使用了，也就是所谓的被其它元素忽略，这就是为什么黄色盒子可以到达原本蓝色盒子的位置。是不是有点绕呢，可以亲自动手多试试看，再来理解我说的这些。

    最后的是fixed定位，其实它就是absolute的一个变种(所以它也是脱离文档流)，将某个元素固定在一个位置，不过滚动条怎么滚动它始终待在那个位置不会消失，通常会用来制作底边栏和导航栏，除了这一点外与absolute没有什么不同，所以就不举例了。

02

—

浮动

    float浮动是脱离文档流的另一种机制，浮动元素向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止(比如两个元素都左浮动就只是挤在一起不会覆盖！)。

    它可以让原本分为上下两行的两个块状元素(两个都要float)合并到一行，当然前提是一行的空间足够容纳两个块状元素(可以利用width来改变块状元素大小以符合要求，如果元素过大就放不下就不能一起在一行)。  

    .top {      background-color: blue;      float: left;    }    .bottom {      background-color: yellow;      float: right;    }

    可以看到原本上下两行的盒子就被一左一右的放到了一行，当然，如果你设置两者都左浮动的话，黄色盒子也只是会挤到蓝色盒子的边缘而不是覆盖：

    最后在补充一个常用的元素居中的方法：   

    .top {      background-color: blue;      margin: 0 auto; /*元素居中*/    }

    好了，关于定位和浮动就说到这里了，有了这个基础，我们再去复现一些网页的大体布局就不会有太大的问题了，希望大家多动手试试哦！