css中的float属性说：float使得元素脱离文档流，但是还在网页流中，无法理解

高冷十三岁 2013-09-07 11:24:46

css中的float属性说：float使得元素脱离文档流，但是还在网页流中，我无法理解。比如下面的页面布局



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title>test</title>

 </head>

 <body>

    <div  id="A" style="border:1px solid red; width:100px; height:100px;float:left;"></div>TTTTTTTTTTT

    <div  id="B" style="border:1px solid black; width:100px; height:100px;"></div>

 </body>

</html>

按我的想法应该是 Div A覆盖住文字“TTTTTTTTT”和Div B, 但是事实上，A 覆盖了 B，但是TTTTTTTTT却是环绕Div A的形式。两者的表现形式应该一样才对呀！(注：Div A也没有完全覆盖住Div B怎么回事？？)

...全文

2665 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

风动之石 2013-12-16

打赏
举报

我最近也在研究这个问题，尽管没有彻底弄明白，但是也知道这是怎么回事。首先，你要明白，float:left的特性，浮动之后文字会环绕（这一点最底层的原理我没弄明白，但是大家都说这就是float的特性，我暂且当这是定理吧。）；其次，文本TTTTTTTTT占据了一行的空间，所以在竖直方向上看，div2应该在文本的下一行，这应该没问题吧？最后，div2发现左边的位置是空的（因为div1浮动之后，不占文本流空间），所以div2就水平向左移动了，占了左边的空间，但是竖直方向还是保持不变。我也只能明白到这儿了，希望能帮助你！

高冷十三岁 2013-09-09

打赏
举报

引用 4 楼 blackchef 的回复:

因为最早设计浮动这个机制的时候，就是为了实现文字环绕在图片周围的效果。所以浮动的时候，文字会环绕在浮动元素周围。 The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

这个我当然知道,但是并没有解决我的疑问既然Div A没有定义行高，为什么文字会受到Div A外框的限制，但是Div B却不受外框限制,我想知道的是为什么而不是就这样

Andy__Huang 2013-09-08

打赏
举报

float表示浮动,float:left表示浮动在文字的左边第二个div自动换行,就是换到文字的下一行 A 覆盖了 B-->不是这样,B是换到一下行,由于没有定义行高,看上去就象是覆盖了,但实际不上,

高冷十三岁 2013-09-08

打赏
举报

引用 2 楼 hdhai9451 的回复:

既然Div A没有定义行高，为什么文字会受到Div A外框的限制，但是Div B却不受外框限制

blackchef 2013-09-08

打赏
举报

因为最早设计浮动这个机制的时候，就是为了实现文字环绕在图片周围的效果。所以浮动的时候，文字会环绕在浮动元素周围。 The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

高冷十三岁 2013-09-07