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

float高度不一致导致错位的解决办法：1、给换行 开始 的第一个元素加上“clear:left;”；2、给父元素定义“font- Size: 0;”，再定义“dis play :inline-block;vert ical -align:to p; ”即可。

本文操作环境：Windows7系统、HT ML 5 && CSS3版，DELL G3 电 脑。

推荐：css视频教程

当N个元素浮动后，会导致错位的问题。一般给元素一个固定的h ei ght就没有这个现象，下面与大家分享下当高度不一致时的解决方法。

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 -s ize:0; 浮动子元素定义需要的font-size， 再定义display:inline-block;vertical-align:top;

ul{ 
    m arg in:0; 
    padding:0; 
    list-style -t y PE :none; 
    font-size:0; 
} 
ul li{ 
    width:160px; 
    display:inline-block; 
    vertical-align:top; 
    font-size:12px; 
}

以上就是float高度不一致导致错位怎么解决的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 float高度不一致导致错位怎么解决 全部内容，希望文章能够帮你解决 float高度不一致导致错位怎么解决 所遇到的问题。

如果觉得 网站内容还不错，欢迎将 推荐好友。

查看更多关于float高度不一致导致错位怎么解决的详细内容...