平常我们经常使用float这个属性,但是当你使用不当的话,就会出现很多问题,比如说:当我们把浏览器缩小页面布局就会出现混乱,很多时候就是使用float不当而造成的。如下图:
完整效果:
浏览器缩小后效果:
一、浮动
讲到浮动,我们必须要明白两个概念,那就是文档流和脱标现象。
1、文档流
页面布局的排列方式:从上至下、从左至右,一个元素占一个“坑”。
2、脱标
- 定义:脱离文档流的标准,不受文档流的约束,漂浮到漂浮层。(漂浮层只有一层)
- 产生脱标的方式:float、绝对定位(absolute)、固定定位(fixed)
3、清除浮动
①overflow:hidden;这个一定要加在飘浮元素的父元素上。(最常用也是最有效的一种方式)
②用Clear属性
③给元素设置固定的宽和高
下图就是将浮动清除的效果,当屏幕缩小布局不会乱:
完整效果:
浏览器缩小后效果:
注意:如果审查元素的时候出现高度为0的情况肯定是有问题的,可以看一下是否是浮动未清除。
二、定位
css:top、right、bottom、left
1、相对定位(relative)
- 定位的元素,可以通过left、right、top、bottom这四个属性设置新的位置
- 元素移动后,原来的坑不变,也就是说它原来的位置还在那里,并没有被挤掉(元神出窍)
- 作用:界面微调 配合绝对定位来用(子绝父相,子元素用绝对定位时,父元素就要用相对定位,而且一定要设置left、top的值,这样才会有效果显示)
2、固定定位(fixed)
- 值当前元素以浏览器位置进行定位,不会以页面位置进行定位
- 特点:设置fixed后,left、top、bottom、right有效
- 脱标
- 主要应用:1、爬楼导航 2、顶部菜单冻结 3、右边的回顶部效果
3、绝对定位(absolute)
- left、top、bottom、right有效
- 当该元素设置了决定定位后,它就会向它的的父元素找看有没有设置相对定位的元素,如果有,就贴着这个父元素;若没有,就会贴浏览器。
- 脱标,该元素就不会占据那个“坑”了。
如:
.frame2{
width: 485px;
height: 200px;
border: 1px solid black;
margin: 50px auto;
position: relative;
}
.frame2 .span_left{
position: absolute;
left: 0;
top:110px;
}
.frame2 .span_right{
position: absolute;
left: 330px;
top:110px;
}
这个左边和右边都设置了绝对定位,父元素也设置了相对定位,从效果可以看到,第一个元素的“坑”已经不存在了,被图片挤掉了,所以绝对定位会脱标,这时我们如果想要图片和文字不重合,就得对图片设置绝对定位了,设置left和top的值。
.frame2 img{
position: absolute;
left: 130px;
top: 0;
}
4、static(默认)——没有定位