[CSS] 定位和清除浮动_html/css_WEB-ITnose

定位

盒子的位移属性 top right bottom left 用于指定元素的位置和方向，这些属性只能在元素的 position 属性设置了 relative absolute fixed 的值时生效。

对于relative ，位移属性指的是元素目前位置到原位置的偏移量，即元素与其原位置的边缘之间的距离。

对于absolute fixed ，位移属性指的是元素与父元素的边缘之间的距离。（ absolute 根据的是非 static 父元素，或者 body ， fixed 根据的是浏览器窗口）

static

元素都有 position 属性，其默认值是 static ，这也意味着，它们没有也不接受位置属性设置。（ top right bottom left ）

relative

relative 元素在页面中仍是正常的、静态的，属于自然流。其他元素不会占用其原来的位置。

如果同时设置了 top bottom ， top 优先级高于 bottom 。

如果同时设置了 left right ，取决于页面所用语言是从左到右 ltr 还是 从右到左 rtl 。

absolute

absolute 元素会脱离文档流。 absolute 元素需要至少一个祖先元素设置了 relative 或 absolute 属性，不然元素定位会相对于页面的主体 body 进行定位。

使用了 absolute 的元素可以指定垂直和水平的位移属性，使 absolute 元素相对于设置了 relative 的祖先元素边缘进行移位。负的位移属性会使元素移到盒子外面。

例如，如果一个absolute元素设置了 top 值为 50px 和 right 值为 100px ， absolute 元素会相对于其设置了 relative 的父元素的顶边向下移动 50px ，相对于父元素的右边向左移动 100px 。

但是，如果使用了 absolute 的元素没有进行任何盒子位移属性设置，那么 absolute 元素的顶部和左部会和设置了 relative 的父元素的顶边和左边重合。如果设置了一个盒子位移属性，比如说 top ，那么absolute元素垂直方向会进行移动，而水平位置默认还是左对齐。

当一个 absolute 元素没有明确指定高度和宽度，同时使用盒子位移的 top 和 bottom 属性时，会使元素的高度跨越整个容器。同样的，当这个元素同时使用位移 left 和 right 属性值，会使元素的宽度跨越整个容器。如果同时使用四个位移属性，会使元素的高度和宽度跨越整个容器。这个时候 absolute 元素的宽度和高度都是 100% 。

fixed

fixed 元素会相对于浏览器窗口进行定位，并且不会随滚动条进行滚动。

fixed 常用于在页面低端呈现横幅，例子如下：

<footer>FixedFooter </footer> 

footer {  bottom: 0;  left: 0;  right: 0;  position: fixed;} 

z-index

要设置 z-index 属性，首先要设置 position 属性为 relative absolute fixed 之一。一般来说，元素出现的时候就放置在 z 轴上。先出现的元素要低于后出现的。可以直接使用 z-index 来控制这种层叠顺序。元素的 z-index 值越高将会出现在越上面。

清除浮动

<divclass="box-set">  <divclass="box">Box 1</div>  <divclass="box">Box 2</div>  <divclass="box">Box 3</div></div> 

.box-set {  background: #e8eae9;}.box {  background: #8ec63f;  height: 100px;  float: left;  margin: 10px;  width: 200px;} 

运行这段代码后，在 .box-set 的 div 本应有一个高亮的灰色背景，但所有的子元素浮动后，这个灰色的背景色是看不到的，因为它的 height 为 0 。

解决方法有两个，利用 overflow 或 clear 属性。

overflow

.box-set {  background: #404853;  overflow: auto;} 

此方法存在缺点，例如，当你添加样式，或者将嵌套在里面的 span 元素移动到父容器的外面，或者你想给元素添加一个盒子阴影、制作一个下拉菜单时，元素的盒子阴影可能会在父元素内被切断。

clearfix

1. 通过在父元素上使用 :before 和 :after 两个伪类并设置 content 为 “” ，从而在浮动元素的父容器前面和后面创建隐藏元素。
2. 设置 clear : both 清除浮动。
3. 设置 display: table 闭合浮动。
4. 加上 zoom 属性来兼容 IE6 。

.box-set:before,.box-set:after {  content: "";  display: table;}.box-set:after {  clear: both;}.box-set {  *zoom: 1;} 

小技巧

为了方便，我们可以定义一个类名，把这个类名加到需要清除浮动的容器上。例如使用类名 group 。在需要清除浮动的容器上添加这个类名 group 。

参考文章

HTML和CSS高级指南之二——定位详解