问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为什么float失效了？

头像
oooooooo
    112
    新手上路，请多包涵

    我写了两个div包裹一些a标签，两个div都是绝对定位，然后浮动就不生效了

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>absolute float</title>
    <style>
        .box1 {
            position: absolute;
        }
        .box2 {
            background-color: #bfa;
            position: absolute;
        }
        .box2 a {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #00f;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
        </div>
    </div>
</body>
</html>

    本来想让圆圈横起来的，结果竖起来了
    就是想知道为什么float失效了。

    前端csshtmlhtml5css3
    阅读 2.5k
    1 个回答
    得票最新
    头像
    Gomi
      2.4k41734

      并没有失效，是因为你的父元素没有设置宽度，看不出来。float是移动到所处容器的边框，可以看下定义。所以你这里浮动元素的容器是box2。复制以下代码就能看到效果
      float

      正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素
      <style>
            .box1 {
                position: absolute;
                background: red;
            }
            .box2 {
                background-color: #bfa;
                position: absolute;
                left: 100px;
                width: 1000px;
            }
            .box2 a {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #00f;
                float: right;
            }
        </style>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题