今天写轮播图的时候，发现一个浮动问题：
<style> .pointList { padding-left: 0px; position: relative; right: 20px; bottom: 20px; z-index: 10000; } .point { width: 10px; height: 10px; border-radius: 100%; background-color: rgba(238, 9, 9, 0.4); border: solid 2px rgba(255, 255, 255, 0.6); float: left; margin-right: 16px; cursor: pointer; list-style: none; } </style> </head> <body> <ul class="pointList"> <li class="point"></li> <li class="point"></li> <li class="point"></li> <li class="point"></li> <li class="point"></li> </ul> </body>就是给li加浮动，然后ul的定位是相对定位的时候，会发现ul是没有高度的，但是给ul加绝对定位的时候，ul会有高度，会被盒子撑开，一开始不明白怎么回事，问身边的人说，ul不会被li撑开，原因是li不是ul子元素，但是明明li就是在ul里面的啊，li就是ul的子元素。后来想明白了，ul不会被li撑开的前提是：li是浮动的，导致li脱离文档流，所以不管你怎么给li加宽度和高度，都不会影响ul，而li浮动以后，要想ul被li撑开，给ul浮动，或者给ul一个绝对定位，因为浮动和绝对定位都会使得元素脱离文档流，这样就会使得ul和li又在同一个文档流中了，ul会继续被li撑开了。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #li标签浮动 #ampltstyleampgt
