Float与position区别

1. 名词解释

   float：浮动，脱离文档流，但是会占据文档位置，浮动元素下方不能放置文档，但是可以放置其他块状元素（块状元素里面的文档不会被盖住而是被挤下来了），位于它的底层；顾名思义就是飘起来直到碰到块状元素的时候会停在当前位置，也可以给浮动元素添加左右外边距，但是边距内是不能放置其他元素。假如设置左浮动，我们在写文档的时候会首先在左浮动元素的右边写，宽度不够的情况下回换行。

   position: 定位，脱离文档流，可以进行自身相对定位，也可以绝对定位，绝对定位是相对父级的定位而言的，自身如果想绝对定位，那么他的父级就要相对定位。

2. 例子

    

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;不会发生穿透现象；

 

转载于:https://www.cnblogs.com/bonly-ge/p/6781465.html