Float与position区别
- 名词解释
float:浮动,脱离文档流,但是会占据文档位置,浮动元素下方不能放置文档,但是可以放置其他块状元素(块状元素里面的文档不会被盖住而是被挤下来了),位于它的底层;顾名思义就是飘起来直到碰到块状元素的时候会停在当前位置,也可以给浮动元素添加左右外边距,但是边距内是不能放置其他元素。假如设置左浮动,我们在写文档的时候会首先在左浮动元素的右边写,宽度不够的情况下回换行。
position: 定位,脱离文档流,可以进行自身相对定位,也可以绝对定位,绝对定位是相对父级的定位而言的,自身如果想绝对定位,那么他的父级就要相对定位。
- 例子
Html | Css | 效果图 |
<div id="div2"> </div> <div id="div3"> </div> | #div2{ width:100px; height:100px; background: green; } #div3{ width: 30px; height: 300px; background: #ccc; } |
其中灰色是300px |
<div id="div2"> </div> <div id="div3"> </div> | #div2{ width:100px; height:100px; background: green; float: left; } #div3{ width: 30px; height: 300px; background: #ccc; } |
其中灰色高度为200px;另外100px被绿色给盖住了,层级index无效,显现不出来。 |
<div id="div2"> </div> <div id="div3"> 你好,这是div3用来实验div3的效果。 </div> | #div2{ width:100px; height:100px; background: green; float: left; } #div3{ width: 30px; height: 300px; background: #ccc; } |
其中灰色的高度为200px;另外的100px,被盖住了,但是文字没有被盖住,都显现出来了。 |
<div id="div2"> </div> <div id="div3"> 你好,这是div3用来实验div3的效果。 </div> | #div2{ width:100px; height:100px; background: green; position: relative; left: 10px;} #div3{ width: 30px; height: 300px; background: #ccc; } |
其中灰色的高度为300px;不会发生穿透现象; |