关于浮动和绝对定位的区别，到底是怎么回事？_html/css

回复讨论(解决方案)

首頁

web前端

html教學

关于浮动和绝对定位的区别，到底是怎么回事？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:35 AM

这有一个小例子：
样式：

结构：

1111111

2222222

3333333

结果是这样的：

我的疑问有：
1、浮动是不是使div1彻底脱离了文档流，在文档流里有没有占据位置？
2、为什么div1和div2重合之后，把div2里的文字挤到了边上去？就是说div1与div2重合了，为什么不能与div2里的段落重合？

请求高手详解！！！

回复讨论(解决方案)

绝对定位才会脱离文档流
楼主可以去google看看 float和 display clear

float是浮动没有脱离文档流

一堆有次序的东西其中有一个是 float
那么你可以想象他像铁块碰见磁铁一样飞向边缘空间还是占着（默认的width属性变成auto了）

你说的这两个问题，看W3C中，关于float的解释多直白的，下面两句就是W3C中关于float的叙述：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

详细内容，直接点击查看： http://www.w3school.com.cn/css/css_positioning_floating.asp

还有你说的文字为啥会出现这个情况，也有说明。

“由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。”这句话有点儿糊涂，求详细的解释

<html><head><title></title><meta content="text/html; charset=GB2312" /><style>.a{border:1px solid red;width:960px;margin:0 auto;}.b{float:left;height:100px;width:100px;background-color:#aaa}.c{height:50px;background-color:#ddd;}</style></head><body><div class = "a">	<div class = "b"></div>	<div class = "c"></div></div></body></html>

登入後複製

效果图：

就拿这段代码说吧，我用a,b,c表示这三个div。
a和c是普通流，b是浮动框。

1：按理论来说，a的高度是以它子元素的总的高度计算的，但是在图中可以看出，a的高度只是和c的高度相同，就是它忽略了b的高度。
2：块框之间，都是上下排列的，每一个块框都占据单独的一行，可以这里，c就当没有看到b存在一样。
这不就是再说，普通流的布局是不考虑是不是在它之前，有浮动框的？

这样说，不知你能清楚我的意思不。

为什么文字会避开，就如同你上面给的代码，这个应该是浏览器本身有对文字进行处理吧，你可以用浏览器调试工具看下，文字的标签

元素，其实还是占据一整行的，只是文字并没有从最左边开始。文字表现这块，是个特例。

<html><head><title></title><meta content="text/html; charset=GB2312" /><style>.a{border:1px solid red;width:960px;margin:0 auto;}.b{float:left;height:100px;width:100px;background-color:#aaa}.c{height:50px;background-color:#ddd;}</style></head><body><div class = "a">	<div class = "b"></div>	<div class = "c"></div></div></body></html>

登入後複製

元素，其实还是占据一整行的，只是文字并没有从最左边开始。文字表现这块，是个特例。

谢谢你的耐心解答，我说的我都知道，但是就是文字表现这块儿不懂，大家都说是特例，但我想明白这是怎么回事，在元素浮动的时候，普通文档流是怎么变化的。如果你能回答就太好了！不管怎样，这分就给你了！

这个，我也不知道咋回事，应该是浏览器规定的吧，不过没有看到过相关的文章。
所以，还真是回答不了。

这个问题我也纳闷貌似这篇文章http://blog.sina.com.cn/s/blog_5f90da9b01016cmo.html有讲到但是我看不懂

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn