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高度不一致導致錯位怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！