首页 > 代码库 > 浮动和绝对定位的区别
浮动和绝对定位的区别
先看看w3c关于浮动float和绝对定位absolute的讲解：
float：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
absolute：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
对于浮动float来说，它仅仅是浮动框脱离标准流，并不是去安全的脱离标准流，而绝对定位absolute是将元素框完全的脱离标准流从文档流中删除：
看看以下的例子：
绝对定位absolute
#div1 {background:#666;position: absolute;top: 0px;left: 0px;/*float:left;*/width:100px;height:100px;}#div2 {background:#093;width:200px;height:200px;}#div3 {background:#363;width:100px;height:100px;}</style><body><div id="div1"> 1111111 <p>1111111</p> <p>1111111</p></div><div id="div2"> <p>2222222</p> <p>2222222</p> <p>2222222</p></div><div id="div3"> <p>3333333</p> <p>3333333</p> <p>3333333</p></div>
浮动float：
#div1 {background:#666;/*position: absolute;top: 0px;left: 0px;*/float:left;width:100px;height:100px;}#div2 {background:#093;width:200px;height:200px;}#div3 {background:#363;width:100px;height:100px;}</style><body><div id="div1"> 1111111 <p>1111111</p> <p>1111111</p></div><div id="div2"> <p>2222222</p> <p>2222222</p> <p>2222222</p></div><div id="div3"> <p>3333333</p> <p>3333333</p> <p>3333333</p></div>
对于浮动float它并没有把div2里面的内容222222遮住而绝对定位absolute把div2的内容覆盖，所以我们在使用浮动和绝对定位的时候需要注意到，虽然在有些情况下float和absolute都能达到效果，但是他们的区别我们不能忽视
jsFiddle：绝对定位absolute、浮动float
浮动和绝对定位的区别
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。