float编排出现问题怎么改


*{padding: 0;
margin: 0;}
.header{background-color: #FFFFFF;
    margin-top: 0;
    width: 100%;
    height:120px ;
    display: flow-root;
    padding: 20px;
border: 1px solid#F8F8F8  ;}
     .logobox{height: 81px;
             width:248px ;
        margin-right:428px ;
     margin-top:13px;
     margin-bottom: 35px; 
       }
       

     #righthead{width: 607px;
    height: 67px;
    margin: 13px  324px;
    float: right;}
     #righthead>li img{width:59px ;
    height: 51px;}
     #righthead>li{display:inline}
     #right::after{content: '';
                display: block;
                clear: both;}
     .middle{width: 100%;
      height: 100%;
       background-color:#F8F8F8 ;
      }
       .middle
       .chart{height: 282px;
      width: 492px;
    margin: 247px 247px 241px 315px;
  }
      .loginform{height: 391px;width: 435px;
          margin:135px  314px 209px 247px;
        border: 2px solid rgb(138, 136, 136);
      text-align: center;
    }
     .loc{width: 339px; height: 58px; background-color: red;}
      .font{font-size: x-small;
      color: gray;}


```html
<body  >
  <div class="header">
    <div class="logobox">
      <img src="C:\Users\杨云飞飞\Desktop\yyf\image\考拉logo.png" alt="考拉">
     <a href="#"></a>
    </div><!--第二层-->
    <div>
      <ul id="righthead">
        <li> <img src="C:\Users\杨云飞飞\Desktop\yyf\image\tuihuo.png" >30天无忧退货</li>
        <li><img src="C:\Users\杨云飞飞\Desktop\yyf\image\feiji.png"> 100%全球优选</li>
        <li> <img src="C:\Users\杨云飞飞\Desktop\yyf\image\zheng.png" >正品保证</li>

      </ul>
    </div><!--第二层-->

  </div><!--第一层-->
  <div class="middle">
   <div>
       <div class="chart">
        <img src="C:\Users\杨云飞飞\Desktop\yyf\image\正品图.png" alt=""> 
         
       </div><!--第三层-->
       <div class="loginform">
        <form   name="loginform"   action="" method="post" >
          <h2  class="title">手机号登录</h2>
                <h6 class="otherlogin">使用密码验证登录</h6>
          
          <div class="tell">
            <input type="tel" maxlength="11" autofocus   placeholder="请输入手机号" required ></div>
        
         <div class="test">
         <input type="text"  placeholder="请输入验证码" required name="test"><br/>
        <input class="logc" type="submit" name="login" value="登录" ><br/>
         <div class="font" >注册/登录代表同一隐私政策和服务条款</div>
        </form>
        <div><img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-tao.png" >
        <img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-zhi.png" >
         <img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-wei.png" >
         <img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-xin.png" >
         <img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-wang.png" >
        </div>
        <div class="regist">
          <!-- a标签表示链接 ,用于页面跳转-->
          <a href="password.html">找回密码</a>
        </div>
       </div><!--第三层登录表单-->
   </div><!--第二层-->
   <div></div><!--第二层-->
  </div><!--第一层-->


```

不改css的情况下,这2块交换下位置,变成下面这样

img

dom位置不变,改css,给logobox加float及去掉 margin-right或者调小一点,要不分辨率小会掉行

  .logobox{height: 81px;
             width:248px ;
       /* margin-right:428px ;*/
     margin-top:13px;
     margin-bottom: 35px;float:left
       }

效果如下
img

有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~

具体是什么HTML编码,以及需要实现什么效果图,需要详细说明一下

只给这么一个css样式,也没html代码,不知道效果,看不出啥问题

你要实现什么样的效果呀

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632