HTML5 + CSS怎么解决设置浮动却没有动反而在中间且错行的问题

  介绍

小编给大家分享一下HTML5 + CSS怎么解决设置浮动却没有动反而在中间且错行的问题,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

今天按照网上例程写小米官网,结果发现

 HTML5 + CSS怎么解决设置浮动却没有动反而在中间且错行的问题

这一部分设置一个父盒子然后子盒子分别设置左右浮动,,代码如下:

.banner  {   宽度:1226 px;   身高:670 px;   背景颜色:绿色;   保证金:0,汽车;   }   .banner  .bannerleft  {   浮:左;   宽度:234 px;   身高:670 px;   背景颜色:橙色;   }   .bannerright  {   浮:正确的;   宽度:992 px;   身高:670 px;   背景颜色:粉色;   }

结果出现的效果是下面这样的:

 HTML5 + CSS怎么解决设置浮动却没有动反而在中间且错行的问题”>,</p> <p>左侧盒子并没有左浮动,右侧也没有右浮动。查看源码则显示的为0或者很小的数,就是不是自己设置的数。</p> <p> <强>解决办法:</强> </p> <p>将H5中左子盒子和右子盒顺序颠倒,结果测试可行,代码:</p> <pre类= & lt; div 类=癰annerright"祝辞& lt;/div>   & lt; div 类=癰annerleft"祝辞   & lt; ul>   & lt; li> & lt; a  https://www.yisu.com/zixun/href=" # ">手机卡电话卡   <李> 电视盒子   <李> 笔记本显示器平板   <李> 家电插线板   <李> 出行穿戴   <李> 智能路由器   <李> 电源配件   <李> 健康儿童   <李> 耳机音箱   <李> 生活箱包      

,最后的效果如下所示:

 HTML5 + CSS怎么解决设置浮动却没有动反而在中间且错行的问题

虽说问题解决了但是并不知道是什么原因,左和右盒子难道不是并列关系吗,为什么要换顺序才行只

看完了这篇文章,相信你对“HTML5 + CSS怎么解决设置浮动却没有动反而在中间且错行的问题”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

HTML5 + CSS怎么解决设置浮动却没有动反而在中间且错行的问题