1.为什么要清除浮动?
因此在一些盒子中不方便赋予高度,比如在新闻文章中,文章内容每天是不定的。
浮动的图片,不能跨越 内边距。
清除浮动,是在父盒子不给定高度的情况下,若子盒子都为浮动,即父盒子没有了高度,height=0,下一个盒子可能“顶上来”,若给定父盒子高度,子盒子的内容可能会超出父盒子边界。
1.1若设置 clear:both (清除所有浮动)可解决(clear:left 清除左浮动;clear:right 清除右浮动),父盒子高度随子盒子最大而定。
1.2 在最后一个子盒子后边添加一个便签,如div <div class="clear"></div> \ 或者 <div style="clear:both"></div>
.clear{
clear:both;
}
1.3 父级标签添加 overflow:hidden ,触发BFC 机制;
1.4 伪类元素after 清除浮动
.clearfix: after {
content:" ";
display:block;
clear:both;
visibility:hidden;
height:0;
}
.clearfix {
*zoom:1;
}
1.5 双伪类标签清除浮动
.clearfix:before, .clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1; // 考虑到IE6、7的兼容性
}
<div class="nav" clearfix>
</div>
2.相对定位(position:relative)top: npx; right:n2px;
以自己盒子的左上角为中心,向下移动npx,向右移动n2px; 移动后原位置保留,浮动元素不能“顶上去”;
3.绝对定位(position:absolute)top:n1px; left:n2px; 绝对定位,不占位置。
无父盒子无定位的情况下,以当前屏幕的页面左上角为中心,向上左方向移动。
right:0px;bottom:0px;以右下角为中心。
若父元素有定位,则以父元素 左上角为基准;若父元素无定位,父父元素有定位,则以父父元素左上角为基准,以此内推。
4.“子绝 父相” 子盒子绝对定位,父盒子相对定位。
在广告栏中经常出现 滚动的小圆圈广告。小圆圈为子盒子,悬停在图片上,不占空间,因此可以为绝对定位。对父盒子而言,如果其为绝对定位,那其不占空间,子盒子为相对定位时,无法以父盒子为基准,可能跑出父盒子外,再者,与父盒子相邻的其他盒子元素会“顶上来”。
5.浮动 并不是真正意义上的完全“脱标”,能做到完全“脱标”的是position:absolute;
eg:<div class=“star”>小星星</div>
<div>小月亮</div>
.star {
float:left;
}
.star {
position:absolute;
}
第一种后面那个div 会“顶”上去,但其内容文字还是在原位置,因此不是完全的“脱标”;
第二种 则是全部“顶”上去。
6.定位的盒子居中对齐
例如在轮播效果图中位于轮播图之上的小圆圈,
若盒子加了定位,position:absolute; 或浮动 float:left /right。则margin:0 auto 盒子居中对齐失效。
7.绝对定位:Position:absolute,表示元素无固定位置,在屏幕上可任意滑动覆盖,当元素属性为绝对定位,有隐式转换为行内块元素的作用,大小与内容有关。可设置 top.left,right,bottom 的值,即在父盒子的上、左、右、下方位多少;
将盒子都为绝对定位,下面其他的盒子会“顶”上去。后来者居上,重叠上去。
固定定位是特殊的绝对定位,只是以当前所见的浏览器为“父”。例如某网站左右侧栏广告一直显示效果,并不随滚动条移动而变化。
8.只有定位才有层叠属性:z-index:0(默认为0),数字越大,层级越高,即将层叠与其他图片之上显示。在下拉菜单中很常见。
9.相对定位,绝对定位,固定定位都是“脱离”标准流的(浮在标准流上),只不过相对定位占有固定位置,(相对定位比标准流高一级)绝对定位和固定定位不占用位置。
相对定位由于占有位置,在将浮动元素设置为相对定位时,它会第一个浮动出现(若不设置其他元素z-index )。
标准流 设置相对定位,层级提升。若都为相对定位,设置z-index 属性大小,层级提升,优先显示。