2 j550341130 j550341130 于 2016.09.09 16:27 提问

求教css中关于float浮动的问题

图片说明
图片说明

这是为啥?

4个回答

j550341130
j550341130   2016.09.09 17:05
已采纳

明白了, 栏目1加上 float 后, 它是飘在栏目2上面的, 此时 栏目2 其实是占满整一行的;
如果设置宽度一样的话, 栏目2会被浮动起来的栏目1遮挡, 所以栏目2被挤到下方了.

wenzhu0_0
wenzhu0_0   2016.09.09 17:14

文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的
元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在它身下布局。
但是文字却会认同浮动元素所占据的区域,围绕它布局,也就是没有拖出文本流。

建议你看一下文本流和文档流相关的东西

j550341130
j550341130 回复wenzhu0_0: 嗯嗯, 多谢讲解~~
大约一年之前 回复
judas_jia
judas_jia 回复wenzhu0_0: 栏目2是div
一年多之前 回复
wenzhu0_0
wenzhu0_0 楼主,我这个才是比较专业的回答,楼上只是说明了现象,没有说明本质
一年多之前 回复
He_May
He_May   2016.09.16 17:01

其实都是文字环绕,只是由于第一个设置的两个div的宽度都为80px,第二个div只能撑大高度来适应第一个div。
如果也一样给第一个div设置宽度,且给第二个设置的宽度比第一个宽,就能明显的看出来了。
图片说明
图片说明

j550341130
j550341130 嗯嗯, 明白了, 多谢讲解
大约一年之前 回复
buquan4041
buquan4041   2016.11.02 00:31

这不就是盒子模型那里面的吗,float以后就和底层分开了。而且会盖住底层的部分

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!