网站首页 > 技术文章 正文
为什么ul里面的li元素浮动起来以后本应该独占一行的P标签会跟着上去贴着li元素的内容呢? 引入的一个CSS里面把除非设置Ul的行高,这样P标签才会下拉,这是为什么?
下图是出来的没加css效果
刚开始我也是烦,但是后来看了一下资料知道是怎么回事了。这是因为浮动使得li脱离正常的文档流,li的父元素ul的高度变为0,这时,与ul相邻的p元素的位置就上去了。又因为浮动会对邻近的内容进行缩进,所以p元素里面的文字会贴着li,如果p元素里的文字足够多,你会看到p元素里的文字是环绕li的,这就是浮动最本质的工作。当你设置ul的高度后,ul的一些性质不再受浮动的影响,p因此就下去了。所以浮动用过之后要留意了,一不小心就捣蛋滴。
猜你喜欢
- 2024-11-10 HTML ul li 横排居中排列的方法,三步骤及实例
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-