float元素浮動(dòng)后高度不一致導(dǎo)致錯(cuò)位的解決辦方法
發(fā)布時(shí)間：2013-11-18 16:33:27 作者：佚名 
我要評論
我要評論當(dāng)N個(gè)元素浮動(dòng)后，會(huì)導(dǎo)致錯(cuò)位的問題。一般給元素一個(gè)固定的height就沒有這個(gè)現(xiàn)象，下面與大家分享下當(dāng)高度不一致時(shí)的解決方法
當(dāng)N個(gè)元素浮動(dòng)后，會(huì)導(dǎo)致錯(cuò)位的問題。一般給元素一個(gè)固定的height就沒有這個(gè)現(xiàn)象。
但是當(dāng)高度不一致時(shí)，就需要想別的辦法來解決了：
1、給父元素定義font-size:0; 浮動(dòng)子元素定義需要的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;
}
2、給換行后的第一個(gè)li添加clear:left 如：
ul li{float:left;width:160px;}
.c{clear:left;}
<li>1</li>
<li>2</li>
<li>3</li>
<li class="c">4</li>
<li>5</li>
<li>6</li>
在這里，程序循環(huán)時(shí)，添加個(gè)if判斷即可。
但是當(dāng)高度不一致時(shí)，就需要想別的辦法來解決了：
1、給父元素定義font-size:0; 浮動(dòng)子元素定義需要的font-size， 再定義display:inline-block;vertical-align:top;
復(fù)制代碼
代碼如下: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;
}
2、給換行后的第一個(gè)li添加clear:left 如：
復(fù)制代碼
代碼如下:ul li{float:left;width:160px;}
.c{clear:left;}
<li>1</li>
<li>2</li>
<li>3</li>
<li class="c">4</li>
<li>5</li>
<li>6</li>
在這里，程序循環(huán)時(shí)，添加個(gè)if判斷即可。
相關(guān)文章
- 本文針對CSS浮動(dòng)float、定位position進(jìn)行學(xué)習(xí)理解，通過實(shí)例幫助大家掌握CSS浮動(dòng)float、定位position技巧，感興趣的小伙伴們可以參考一下2016-04-21
- 這篇文章主要介紹了css浮動(dòng)(float/clear)使用方法，如果你理解CSS盒子模型，但對于浮動(dòng)不理解，那么這篇文章可以幫助你2014-03-14
- 下面小編就為大家?guī)硪黄宄?dòng)(float)的影響介紹。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-07