css浮动与绝对定位小记

浮动

float属性可以设置的值为none,left,right.对于设置了浮动的元素，会向其父元素的左侧或右侧紧靠，默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容来确定。浮动可以让一个元素移到它所在行的某一边，使得其他内容沿着该元素的边缘向下流。

浮动的盒子会脱离文档流，形成环绕的效果。

脱离文档流

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

上左图所对应的代码：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>float</title>

<style type="text/css">

body{

    margin:15px;

    font-family:Arial; font-size:12px;

    }

.father{

    background-color:#ffff99;

    border:1px solid #111111;

    padding:5px;

    }

.father div{

    padding:10px;

    margin:15px;

    border:1px dashed #111111;

    background-color:#90baff;

    }

.father p{

    border:1px dashed #111111;

    background-color:#ff90ba;

    }

.son1{

    float:left;

}

</style>

</head>

<body>

    <div class="father">

        <div class="son1">Box-1</div>

        <div class="son2">Box-2</div>

        <div class="son3">Box-3</div>

        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>

    </div>

</body>

</html>

对应效果图：

标准流中的Box-2的文字在围绕着Box-1排列，此时Box-1的宽度不再伸展，而是能容纳下内容的最小宽度。那么Box-2的盒子宽度范围如何确定呢？用Firebug可以发现，是与Box-1的左边框重合，因为此时Box-1已经脱离标准流，标准流中的Box-2会顶到原来Box-1的位置，而文字会围绕着Box-1排列。

环绕效果

<style type="text/css">

  img {

    float: left;

}

</style>

<img src="http://XXX" />

<p>Some words...</p>

清除浮动

因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：

.news {

  background-color: gray;

  border: solid 1px black;

  }

.news img {

  float: left;

  }

.news p {

  float: right;

  }

.clear {

  clear: both;

  }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

<div class="clear"></div>

</div>

有时，并不愿意因为要清除浮动而添加额外的div，可以采用如下方法：

1.新的解决方法是在浮动元素的容器上使用 overflow 属性，如果你设值为hidden 或 auto，也可以解决高度重叠的问题。

.news {

  background-color: gray;

  border: solid 1px black;

  overflow: hidden;

  }

.news img {

  float: left;

  }

.news p {

  float: right;

  }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

2.上面这种方法更简单也更优雅，但是问题是，如果容器元素必须设置为overflow: visible，又该怎么办呢？方法是首先使用 :before 和 :after 在元素内创建一些不浮动的东西，但实际上我们并不希望出现任何多余的东西，所以一般设置一个空字符串，但是要设置display:block，最后使用老办法，清除浮动。

使用为元素处理：

.news {

  background-color: gray;

  border: solid 1px black;

  }

.news img {

  float: left;

  }

.news p {

  float: right;

  }

.clearfix:after{

  content: ".";

  display: block;

  height: 0;

  clear: both;

  visibility: hidden;

  }

<div class="news clearfix">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

如果需要兼容IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

浮动使用tips:

1. 浮动元素的活动区域

　　仅限于它的父容器元素，不会超出父容器

2. 浮动元素的位置

　　水平方向：尽可能居左或居右，如果它前面还有浮动元素，会跟在它后面，如果超出该行就会换行

　　垂直方向：尽可能的居顶

关于水平方向的位置，需要注意以下几点：

1) 向左浮动的元素不会出现在向右浮动的元素的右侧

关于垂直方向的位置，需要注意以下几点：

1) 浮动元素不会比容器的顶部还高

2) 浮动元素不会比前一个块级元素或浮动元素更高

3) 浮动元素不会比前一个行内元素更高

绝对定位

设置为绝对定位的元素框会脱离文档流，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。所谓的包含块就是离其最近的position不为static值的父元素。注意:应用了position: absolute的元素会脱离页面中的普通流并改变display属性.

#box2{

  position: absolute;

  left: 30px;

  top: 20px;

}

绝对定位要点：

1.使用绝对定位的盒子以它的“最近”的一个“已定位”（position属性被设置，并且被设置为不是static的任意一种）的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

2.绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

巴特西

css浮动与绝对定位小记

最新文章

热门文章