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

图片说明
图片说明

这是为啥?

4个回答

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

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

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

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

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

j550341130
叽哩叽哩鸡 嗯嗯, 明白了, 多谢讲解
3 年多之前 回复

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问