您的位置：首页 > Web前端 > CSS

【CSS】 布局之浮动float和绝对定位absolute的选择

2014-10-26 22:13 676 查看
　　[b]浮动float：[/b]

　　　　浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

　　　　由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。(W3C)

　　[b]绝对定位absolute:[/b]

　　　　设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。(W3C)　　

　　以上是W3C里对浮动和绝对定位的解释。

　　乍一看貌似两者没有什么关系，不过仔细想想，两者又有很多的相似之处。比如两者都从文档流中独立出来，并且元素在文档流中的原有空间都会被关闭。

　　我们可以用两者达成同一个目的。

　　首先写一个坯子：　

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline、block、inline-block的区别</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 500px;
margin: 100px auto 0 auto;
border: 1px solid red;
}

#a, #b, #c,#d {
width: 100px;
height: 100px;
margin: 2px;
}
#a {
background: #ccc;
}
#b {
background: #666;
}
#c {
background: blue;
}
#d {
background: green;
}
</style>
</head>
<body>
<div id="box" class="clearfix">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</body>
</html>


　　效果：

　


　　现在我们给a块做向左浮动：

#a {
background: #ccc;
float: left;
}




　　我们看到a块向左浮动，文档流中失去了空间，之后的b、c、d逐次补上。

　　如果给a块设置绝对定位又是什么情况呢？

#a {
background: #ccc;
position: absolute;
}




　　我们发现效果是一样的。

　　不过如果a块后面有一段文字呢？

<body>
<div id="box" class="clearfix">
<div id="a"></div>
<span>SD卡收到货我ID号为活动文化低哦按活动ihawoidh</span>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</body>


　　浮动float：



　　绝对定位absolute:



　　这么看差别就出来了，绝对定位独立于整个模型中，没有影响到文档流中的元素，而浮动则影响到了其之后的文档流。　　

　　接下来，我们给a、b、c、d全部都浮动或者绝对定位：

　　浮动float：



　　绝对定位absolute:



　　这样也看出区别了，元素进行浮动后，会按照浮动流的先后顺序进行排列，而绝对定位则是每一个元素都独立存在于其他所以元素。　

　　现在，我们想把a、b、c、d的父元素box框给撑起来，其实也就是其父元素自适应高度，则浮动可以用clear属性：

　　我们可以在d块后面加一个

<div style="clear: both"></div>


　　或者有更好的方法：

.clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}


　　 这种方法是用":after"伪元素在元素的内容之后插入了一个块级元素(display: block)。将其属性设置"clear：both"从而达到与前者同样的效果。



　　至于上面两种方法的取舍，建议使用下一种，因为下面一种不用在html代码里添加额外的div块代码，不会对html的结构造成影响。　

　　如果我们要让进行绝对定位的父元素边框自适应该怎么办？clear只能应用在清除浮动的操作中，对进行绝对定位的元素块是不起作用的。所以我们只能通过计算给父元素框设置高度，这样才能达到这样的效果。

　　[b]如果我们需要达到这样的效果：[/b]

　　　　页面四角固定有四个元素块，页面中央有一个固定长宽的元素块居中，并且当我们调整页面的大小时，这些元素块相对于页面的位置不发生改变。



　　有2种方法可以达到这样的效果：

　　第一种： 浮动+定位：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float和absolute</title>
<style>
* {
margin: 0;
padding: 0;
}

#a, #b, #c,#d {
width: 100px;
height: 100px;
margin: 2px;
background: #666;
}
#a {
float: left;
}
#b {
float: right;
}
#c {
float: left;
position: absolute;
left: 0;
bottom: 0;
}
#d {
float: right;
position: absolute;
right: 0;
bottom: 0;
}
#content {
width: 400px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="content"></div>
</body>
</html>


　　第二种：绝对定位 ：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float和absolute</title>
<style>
* {
margin: 0;
padding: 0;
}

#a, #b, #c,#d {
width: 100px;
height: 100px;
margin: 2px;
background: #666;
}
#a {
position: absolute;
top: 0;
left: 0;
}
#b {
position: absolute;
top: 0;
right: 0;
}
#c {
position: absolute;
left: 0;
bottom: 0;
}
#d {
position: absolute;
right: 0;
bottom: 0;
}
#content {
width: 400px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="content"></div>
</body>

</html>


　　仔细观察发现其实第一种方法完全有点画蛇添足的意思，将四个元素浮动再定位还不如开始就定位来得直接。而且如果用了浮动实现，还会发生很多意外的情况。

　　比如在box内容的最上端添加一个高度为100px宽度为400px并居中的长框。

　　浮动float：



　　绝对定位absolute：



　　我们发现后期往html结构里添加内容时，只有绝对定位的布局没有受到影响，这恰恰是我们所需要达到的效果。

　　所以在日常的选择中，固定分布的布局尽量使用定位(relative/absolute)，而浮动则在导航条等横式布局中运用得多一些。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航