编程技术文章分享与教程

网站首页 > 技术文章 正文

关于ul里边的li浮动后边的p不独占一行问题

hmc789 2024-11-10 10:35:45 技术文章 2 ℃

为什么ul里面的li元素浮动起来以后本应该独占一行的P标签会跟着上去贴着li元素的内容呢? 引入的一个CSS里面把除非设置Ul的行高,这样P标签才会下拉,这是为什么?

下图是出来的没加css效果

刚开始我也是烦,但是后来看了一下资料知道是怎么回事了。这是因为浮动使得li脱离正常的文档流,li的父元素ul的高度变为0,这时,与ul相邻的p元素的位置就上去了。又因为浮动会对邻近的内容进行缩进,所以p元素里面的文字会贴着li,如果p元素里的文字足够多,你会看到p元素里的文字是环绕li的,这就是浮动最本质的工作。当你设置ul的高度后,ul的一些性质不再受浮动的影响,p因此就下去了。所以浮动用过之后要留意了,一不小心就捣蛋滴。

Tags:

标签列表
最新留言