float高度不一致导致错位怎么解决

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高度不一致导致错位怎么解决的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！