HTML5+CSS怎么解決設置浮動卻沒有動反而在中間且錯行的問題

小編給大家分享一下HTML5+CSS怎么解決設置浮動卻沒有動反而在中間且錯行的問題，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

今天按照網上例程寫小米官網，結果發現

這一部分 設置一個父盒子 然后子盒子分別設置左右浮動 ，代碼如下：

.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;
}

結果出現的效果是下面這樣的：

左側盒子并沒有左浮動，右側也沒有右浮動。查看源碼則顯示的為0或者很小的數，就是不是自己設置的數。

解決辦法：

將H5中左子盒子和右子盒順序顛倒，結果測試可行，代碼：

<div class="bannerright"></div>
		<div class="bannerleft">
			<ul>
				<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="#">健康 兒童</a></li>
				<li><a href="#">耳機 音箱</a></li>
				<li><a href="#">生活 箱包</a></li>
			</ul>
		</div>

 最后的效果如下所示：

雖說問題解決了 但是并不知道是什么原因，左和右盒子難道不是并列關系嗎，為什么要換順序才行。 

看完了這篇文章，相信你對“HTML5+CSS怎么解決設置浮動卻沒有動反而在中間且錯行的問題”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！