HTML5+CSS設(shè)置浮動(dòng)卻沒(méi)有動(dòng)反而在中間且錯(cuò)行的問(wèn)題
今天按照網(wǎng)上例程寫(xiě)小米官網(wǎng),結(jié)果發(fā)現(xiàn)

這一部分 設(shè)置一個(gè)父盒子 然后子盒子分別設(shè)置左右浮動(dòng) ,代碼如下:
.banner {
width: 1226px;
height: 670px;
background-color: green;
margin: 0 auto;
}
.banner .bannerleft {
float: left;
width: 234px;
height: 670px;
background-color: orange;
}
.bannerright {
float: right;
width: 992px;
height: 670px;
background-color: pink;
}
結(jié)果出現(xiàn)的效果是下面這樣的:
左側(cè)盒子并沒(méi)有左浮動(dòng),右側(cè)也沒(méi)有右浮動(dòng)。查看源碼則顯示的為0或者很小的數(shù),就是不是自己設(shè)置的數(shù)。
解決辦法:
將H5中左子盒子和右子盒順序顛倒,結(jié)果測(cè)試可行,代碼:
<div class="bannerright"></div> <div class="bannerleft"> <ul> <li><a href="#">手機(jī)卡 電話卡</a></li> <li><a href="#">電視 盒子</a></li> <li><a href="#">筆記本 顯示器 平板</a></li> <li><a href="#">家電 插線板</a></li> <li><a href="#">出行 穿戴</a></li> <li><a href="#">智能 路由器</a></li> <li><a href="#">電源 配件</a></li> <li><a href="#">健康 兒童</a></li> <li><a href="#">耳機(jī) 音箱</a></li> <li><a href="#">生活 箱包</a></li> </ul> </div>
最后的效果如下所示:

雖說(shuō)問(wèn)題解決了 但是并不知道是什么原因,左和右盒子難道不是并列關(guān)系嗎,為什么要換順序才行。
總結(jié)
到此這篇關(guān)于HTML5+CSS設(shè)置浮動(dòng)卻沒(méi)有動(dòng)反而在中間且錯(cuò)行的文章就介紹到這了,更多相關(guān)html css設(shè)置浮動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章

html/css中float浮動(dòng)的用法實(shí)例詳解
這篇文章主要介紹了html/css中float浮動(dòng)的用法實(shí)例詳解,需要的朋友可以參考下2019-09-10
HTML5 CSS3實(shí)現(xiàn)七彩變換的天空中白云漂浮動(dòng)畫(huà)效果源碼
這是一款基于HTML5 CSS3實(shí)現(xiàn)七彩變換的天空中白云漂浮動(dòng)畫(huà)效果源碼。七彩變換的天空背景上,漂浮著大片的白云,伴隨著天空七彩背景的顏色變換,白云也呈現(xiàn)出漂浮、旋轉(zhuǎn)的動(dòng)2019-03-19html+css 清除浮動(dòng)的相關(guān)技巧心得
下面小編就為大家?guī)?lái)一篇html+css 清除浮動(dòng)的相關(guān)技巧心得。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,給大家一個(gè)參考2016-03-17Html+CSS浮動(dòng)的廣告條實(shí)現(xiàn)分解
廣告條想必大家并不陌生吧,在本文將為大家詳細(xì)介紹下如何使用Html+CSS實(shí)現(xiàn)浮動(dòng)的廣告條,感興趣的朋友可以參考下2013-10-08
基于jQuery+CSS實(shí)現(xiàn)的浮動(dòng)html菜單效果分享代碼
jQuery+CSS實(shí)現(xiàn)的菜單效果,菜單可以跟隨滾動(dòng)條上下浮動(dòng)2012-09-06




