关于浮动的一个问题

问题描述

目前在仿写小米官网，写顶部的时候使用浮动，尝试了很多方法不能把购物车浮动到最右面，求教

问题出现的环境背景及自己尝试过哪些方法

先写或者后写购物车的浮动，都没有效果

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米商城 - 小米 MIX 3、小米 8、红米 6 Pro 、小米电视官方网站</title>
    <link rel="shortcut icon" href="https://www.mi.com/favicon.ico">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!-- 顶部 -->
    <div class="topbar">
        <!-- 顶部容器 -->
        <div class="container">
            <!-- 导航 -->
            <div class="topbar-nav">
                <a href="#">小米商城</a>
                <a href="#">MIUI</a>
                <a href="#">IoT</a>
                <a href="#">云服务</a>
                <a href="#">金融</a>
                <a href="#">有品</a>
                <a href="#">小爱开放平台</a>
                <a href="#">政企服务</a>
                <a href="#">下载 app</a>
                <a href="#">Select Region</a>
            </div>
            <!-- 导航 Over-->

            <!-- 消息信息 -->
            <div class="topbar-info">
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">消息通知</a>
            </div>
            <!-- 消息信息 Over-->

            <!-- 购物车 -->
            <div class="topbar-cart">
                <a href="#">购物车（0)</a>
            </div>
            <!-- 购物车 Over-->
        </div>
        <!-- 顶部容器 Over -->
    </div>
    <!-- 顶部  Over-->
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
.topbar{
    /* background: #333333; */
    height: 40px;
}
.container{
    width: 1226px;
    /* 居中 */
    margin: 0 auto;
}
.container::before,.container::after{
    content: '';
    display: table;
}
.container::after{
    clear: both;
}
.topbar-nav{
    float: left;
}
.topbar-info,.topbar-cart{
    float:right;
}

你期待的结果是什么？实际看到的错误信息又是什么？

可以把购物车浮动到最右边，解决问题的思路，感谢！

css html

html5

阅读 3.1k

4 个回答

得票最新

ars_qu

1.7k21229

发布于
2018-11-30

✓ 已被采纳

原因:
之所以会产生这样的结果是因为这两个元素都设置了右浮动,所以它们都脱离了文档流。
通俗来讲就是消息框是先说我不按你的规则排队了,我要从右边开始排队,所以顶在了右边的第一个位置,而购物车是后到的,所以就排在了消息框的左边

解决的方法:
html下把topbar-cart 和 topbar-info 的位置对调即可

  <div class="topbar-cart">
    <a href="#">购物车（0)</a>
  </div>
  <!-- 消息信息 -->
  <div class="topbar-info">
     <a href="#">登录</a>
     <a href="#">注册</a>
     <a href="#">消息通知</a>
  </div>

罗小布

1391

发布于
2018-11-29

更新于
2018-11-30

移动dom的顺序，如下图。按照渲染顺序，购物车先向右动，然后是消息通知
图片描述

<html>
<body>
    <!-- 顶部 -->
    <div class="topbar">
        <!-- 顶部容器 -->
        <div class="container">
            <!-- 导航 -->
            <div class="topbar-nav">
                <a href="#">小米商城</a>
                <a href="#">MIUI</a>
                <a href="#">IoT</a>
                <a href="#">云服务</a>
                <a href="#">金融</a>
                <a href="#">有品</a>
                <a href="#">小爱开放平台</a>
                <a href="#">政企服务</a>
                <a href="#">下载 app</a>
                <a href="#">Select Region</a>
            </div>
            <!-- 导航 Over-->
             <!-- 购物车 -->
            <div class="topbar-cart">
                <a href="#">购物车（0)</a>
            </div>
            <!-- 购物车 Over-->
            <!-- 消息信息 -->
            <div class="topbar-info">
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">消息通知</a>
            </div>
            <!-- 消息信息 Over-->
        </div>
        <!-- 顶部容器 Over -->
    </div>
    <!-- 顶部  Over-->
</body>

</html>