前端开发之CSS基本布局(四) — 浮动与定位

Author : luckyGirl

浮动(float)与定位(position)的使用盒模型布局更加灵活, 同时这俩个属性的使用会影响到普通流,使用不当,会产生不期望的效果.

首先来讲述下float属性:
Note: 浮动使元素从正常流布局中删除,但仍会影响布局
浮动元素的基本规则:
1. 浮动元素的边界不能超出其包含块的内边距
2. 浮动元素的左(或右)边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(左)外边界,除非后出现浮动元素的顶端在先出现浮动元素的底端下面
3. 浮动元素的顶端不能比其父元素的内顶端更高
4. 浮动元素必须尽可能高地放置
5. 左浮动元素必须向左尽可能远,右浮动元素必须向右尽可能远,位置越高就会向左或右浮动的越远
6. 浮动元素的display属性默认被设置为block
基本原则虽如上,但在实际应用中情况更加复杂,以下列举了几种实用行为:
1. 浮动图像有外边距
2. 背景与浮动元素 (第一个段落有背景色)
3. 元素背景在浮动元素之下

4. 浮动元素有负外边距

5. 浮动元素比父元素更宽
6. 行内与块级元素与浮动元素重叠的行为

Note: 行内元素完全覆盖了浮动图像,而块级元素只是将内容显示在浮动元素之上,但是背景和边框都在浮动元素之下
由于浮动元素完全从普通流中删除,其他元素为避免受其影响,其他会添加clea属性(清除浮动):
1. 普通的清楚浮动(清除左边的浮动: clear: left)

2. 清除浮动的元素有外边距的情况(通常如果外边距(上/下)小于浮动元素的高度,此值相当于被忽略)
img.silder {float:left;margin:0;}
h3 {border:1px solid gray; clear:left;margin-top:15px;}
<img src=”boxer.png” class=”silder” height=”50” width=”50” />
<img src=”stripe.png” height=”10” width=”100” />
<h3>Why Doubt Salmon</h3>
还有个与之相关的概念,闭合浮动,是对元素本身进行设置,通常方法有许多,但是比较喜欢使用:after伪元素,注意是由于这样的使用会使结构和语义更加正确,无需添加额外的标签:
<style type=”text/css”> 
.clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} </style> 
<!–[if IE]> <style type=”text/css”> .clearfix {zoom: 1; display: block;} </style> <![endif]–>
接下来说一下position属性

Note: absolute将使元素框从普通流删除,但其位置是相对于包含块; fixed使元素从普通流删除,其位置是相对于视窗本身
absolute(绝对定位)
1. 非替换元素的放置和大小,一般的,元素的大小和位置取决于其包含块,宽度和水平放置: left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 包含块width
<div style=”position:relative;width:25em;border:1px dotted”>
An absolutely positioned element can have its content
<span style=”position:absolute;top:0;left:1em;right:1em;width:10em;background:silver;margin: 0 auto;”>shrink-wrapped</span>
Thanks to the way position rules work.
</div>
fixed(固定定位)
元素表现类似于设置成absolute,只是其包含块为视窗本身,主要应用于形成mask
relative(相对定位)
元素框偏移某个距离,元素仍保持其未定位前的形状,原本所占空间仍保留
img {position:relative;top:-20px;left:-20px;}
PS. 在实践中经常会发现position属性在IE下会有莫名的bug,如只有在鼠标over一些使用position或是其父元素含有此属性时,元素会跳动以下,因此建议能不用尽量不要用此属性
转载来源: http://www.yuuuuc.me/?p=552
standard

Have your say