HTML5+CSS設(shè)置浮動(dòng)卻沒(méi)有動(dòng)反而在中間且錯(cuò)行的問(wèn)題

發(fā)布時(shí)間：2020-05-26 14:37:14 作者：溪山行旅1024

這篇文章主要介紹了HTML5+CSS設(shè)置浮動(dòng)卻沒(méi)有動(dòng)反而在中間且錯(cuò)行,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

今天按照網(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)文章，希望大家以后多多支持腳本之家！