float高度不一致导致错位的解决办法：1、给换行开始的第一个元素加上“clear:left;”；2、给父元素定义“font-size:0;”，再定义“display:inline-block;vertical-align:top;”即可。
本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑。
推荐：css视频教程
当N个元素浮动后，会导致错位的问题。一般给元素一个固定的height就没有这个现象，下面与大家分享下当高度不一致时的解决方法。
float元素高度不一致导致错位怎么解决？
一、解决方法是给换行开始的第一个元素加上 clear:left; 即可。
例如 四列时应该时第5个、9个…加clear:left;
.row .col-lg-3:nth-child(4n+1),.row .col-md-3:nth-child(4n+1){ clear:left;}
登录后复制
4n+1 选择一行4列时下一行第一个元素
二、或者给父元素定义font-size:0; 浮动子元素定义需要的font-size， 再定义display:inline-block;vertical-align:top;
ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width:160px; display:inline-block; vertical-align:top; font-size:12px; }
登录后复制
以上就是float高度不一致导致错位怎么解决的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2880773.html
