一 float属性
float属性,可以将元素向左或向右推,以允许其它元素环绕它.
float通常与图像一起使用,但在处理布局时也很有用.
float属性的值是left,right和none.
●left,right会使元素向左或向右浮动.
●none能确保元素不会进行浮动.
元素是水平浮动的,这以为着元素只能左右浮动,不能上下浮动.
如果连续放置几个浮动的元素,那么如果有足够的空间,它们将相互浮动.
例如,在设置页面布局中,可以通过设置浮动将图像和文本设置到页面中,使得文本可以跟图像并排显示.
二 清除float
元素设置了float属性后,会使后面的元素都受其影响,将环绕在其周围.为了避免这种情况,请使用clear属性.
clear属性指定某个元素不受其他设置了float属性的元素的影响.
在下面的例子中,如果我们将div元素设置为float属性,则div元素后面的段落将环绕在图像周围.
html代码:
<body>
这段落在div元素之上
不受浮动属性的影响
<div class="floating"><image src="background-image.jpg"/></div>
这段落在div元素之后
受浮动属性的影响.
<div>这一段也在div元素之后
受浮动属性的影响
</div>
</body>
css代码:
.floating{float:right;}
效果如下:
如果有一个具有float属性的元素,在这个元素之后的那些元素都将受到影响.
clear属性可以使用right,left和both来指定某一个元素不受其他浮动元素的影响.
默认值是none,它不清除任何浮动属性,它允许在两边都有浮动元素.
both用来清除左右两个水平方向的浮动效果.
三 overflow属性
页面上的每个元素都是一个盒子.如果没有设置盒子的高度,那么盒子的高度将随着所需的内容的增大而变大.
html代码:
<div>
这个文本在div元素里面,它有一个蓝色的
背景颜色,并浮动在左侧.我们设定一个具体的
div元素的高度和宽度,正如你所看到的,这样会导致文本内容的溢出.
</div>
css代码:
div{width:150px;height:150px;background-color:LightBlue; float:left; }
效果如下:
overflow属性有四个值:visible(默认值),scroll,hidden和auto
scroll值能阻止内容溢出,但会增加出滚动条,通过拉动滚动条可以浏览所有内容.
css代码:
div{width:150px; height:150px; background-color:LightBlue; float:left; overflow:scroll;}
效果如下:
auto:如果内容溢出被限制,则会添加一个滚动条,使超出的内容可以通过滚动展示出来.
hidden:隐藏掉内容溢出的内容.
overflow的默认值是visible
四 z-index属性
当元素位于正常流程顺序之外时(受position等属性影响时),它们可以重叠于其他元素.
z-index属性指定元素的堆栈顺序(通过z-index的值可以决定哪个元素应放置在其他元素的前面或后面)
html代码:
<div class="blue">blue(w3cschool)</div>
<div class="red">red(w3cschool)</div>
css代码:
.blue{background-color:#8EC4D0; margin-bottom:15px;width:120px; height:120px; color:#FFF;}
.red{background-color:#FF4D4D; position:relative;width:120px; height:120px; color:#FFF; margin-top:-50px; margin-left:50px;}
效果如下:
红框与蓝框重叠,红框会位于蓝框上方,因为红框是后加载的.
设置z-index属性可以改变这个顺序
为蓝色div元素指定较高的z-index值,为红色div元素指定较低的z-index值(值大的元素重叠在上边.)
css代码:
.blue{background-color:#8EC4D0; margin-bottom:15px;width:120px; height:120px; color:#FFF; z-index:4;}
.red{background-color:#FF4D4D; position:relative;width:120px; height:120px; color:#FFF; margin-top:-50px; margin-left:50px;z-index:2;}
z-index仅适用于定位元素(position:absolute,position:relative或position:fixed)