Div 中的文字是怎么布局的？

程静涛 2013-11-26 07:12:57



<html>

<body>

   <div style="background-color: red;">

      <div id="div1"  style="float:left;width:100px;height:100px;">nnjlhjg</div>

      <div id="div2" style="width:100px;height:100px;background-color:green;">lkjljljl</div>

   </div>

</body>

</html>

如上代码，
div1向左浮动，div2 没有任何浮动，会盖在div1的位置上。
为什么div2的文字不在div2的里边，而是在最下边？

浏览器对于块元素中的内联元素怎么处理的？

...全文

941 22 打赏收藏转发到动态举报

写回复

用AI写文章

22 条回复

切换为时间正序

请发表友善的回复…

发表回复

eclipsewangping 2013-12-03

打赏
举报

http://www.w3school.com.cn/css/css_positioning_floating.asp

行框和清理

eclipsewangping 2013-12-03

打赏
举报

div2里的文字正常情况（clear不为both）下应该环绕div1，但是 div2和div1宽度，高度一样。

所以文字被挤到了下面，

ziyu529 2013-12-02

打赏
举报

引用 17 楼 u012845754 的回复:

可能跟浏览器有关

对于中文，英文，数字有个word-break样式，就是对于断字换行的问题，如果一连串英文单词没有空格间隔会和你连续的数字是一样的，浏览器是认为一个字符，所以不会换行。

吞天程序猿 2013-11-29

打赏
举报

可能跟浏览器有关

吞天程序猿 2013-11-29

打赏
举报

我用的很正常

ziyu529 2013-11-29

打赏
举报

正常情况下是div1在上面，然后换行的是div2. div1浮动之后，它的高度就不足以影响父div的高度了，你可以修改div2的高度就会发现不浮动div2的高度才是父div的真正高度。 div2在div1下面是因为div会正常显示换行。所以才会在div1的下面，因为刚好div1的高度和div2的高度是一样的，所以div2的内容会超出父div的红色范围。

ziyu529 2013-11-29

打赏
举报

正常情况下是div1在上面，然后换行的是div2.

掘金泥石流 2013-11-29

打赏
举报

引用 2 楼 nndtdx 的回复:

[quote=引用 1 楼 u010718328 的回复:] ……第一个DIV 用了浮动属性可是第二个没有啊？div的float默认是inline 前后都有换行符你不设置float属性自然那是在第二行了 ……~

不是吧，我的意思是 div2 中的文字为什么在第二行（div2 本省是在第一行的。）。[/quote] 所以啊你的第一个div默认是占一行你没有设置float属性而div2 设置了left div1把第一行占了 div2只能跑第二行的左边了，你这样设置和没设置float属性的效果是一样的，不信你把 div2的float属性删了没变化

掘金泥石流 2013-11-29

打赏
举报

引用 2 楼 nndtdx 的回复:

[quote=引用 1 楼 u010718328 的回复:] ……第一个DIV 用了浮动属性可是第二个没有啊？div的float默认是inline 前后都有换行符你不设置float属性自然那是在第二行了 ……~

不是吧，我的意思是 div2 中的文字为什么在第二行（div2 本省是在第一行的。）。[/quote] 每个div都有position设置方式你的div2 本身就在第二行因为他的position默认是static 只有position设置为absolute的并且z-index小于前一个div的才会被覆盖，不设置的情况下默认都是垂直换行排列每个div都占一行

程静涛 2013-11-29

打赏
举报

引用 7 楼 NIHAOX1 的回复:

[quote=引用 6 楼 nndtdx 的回复:] [quote=引用 5 楼 NIHAOX1 的回复:]
.clear{
    clear : both;
}

不是我想要的答案啊，我并不是想实现某种效果，而是在当前的代码下，为什么会出现这种现象。[/quote] 1楼和3楼的基本上就是正解了楼主感兴趣可以去google一下 css的 display 属性[/quote] 不知道是我的表达能力和理解能力有限还是你们没有弄明白我在问什么。。。

程静涛 2013-11-29

打赏
举报

引用 10 楼 u012732649 的回复:

这个问题蛮有意思的，如果之前没看到这个，我会感觉div2里的文字应该被漂浮的div1遮住，我把楼主的代码拷下来尝试，各个浏览器都这样，相信也不是兼容性问题，那应该是块级元素和行级元素的特性问题，具体怎么解释我还没完全明白，大家一起讨论吧，思考ing

我想我已经找到的了答案。

==============



<div id="div1" style="width:100px;height:100px;background-color:red">

这是div1

</div>

<div id="div2" style="width:200px;height:200px;background-color:yellow">

这是div2,没有任何浮动，正常布局

</div>

div1 ,div2 正常布局，没有任何浮动，效果如下，一切正常。

============



<div id="div1" style="width:100px;height:100px;background-color:red;float:left">

这是div1，float:left

</div>

<div id="div2" style="width:200px;height:200px;background-color:yellow;">

这是div2，它的内容会沿着div1元素的边框进行分布

</div>

效果如下

div1左浮动，div2 正常布局，由于div1 进行了浮动，脱离正常文档流，div2将无视div1进行布局，表现的就像浮动元素不存在一样。

其实，上边的理论并不完整，浮动元素 div1虽然对div2 的布局本身没有影响，但是却会影响到div2 中文本内容，文本内容将会围绕浮动元素的边框，所以，div2里边的内容并不是从左上角开始，而是沿着div1的右边沿开始。

【术语是：浮动元素旁边的行框会被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。】

分析原问题中的例子，便可知，div2的文本受到浮动元素的影响，要围绕div1进行摆放，但是由于div2的宽高和div1的宽高一致，这些文本被挤到了下边，沿着div1的下边框。

另外，我发现浏览器对数字和中文的处理也是不同的。
示例如下



<div id="div1" style="width:100px;height:100px;background-color:red;float:left">

这是div1

</div>

<div id="div2" style="width:200px;height:200px;background-color:yellow;">

1111111111111111111111111111111111111111111111111111

</div>

数字并不是沿着div1的右边沿，而是下边框。