float高度不一致导致错位的解决方法

这篇文章主要介绍float高度不一致导致错位的解决方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为太湖企业提供专业的成都网站制作、成都网站建设、外贸营销网站建设，太湖网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

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

当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高度不一致导致错位的解决方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！