margin:0 auto;在float后，无法让div居中了呢？

作者站长头像
站长
· 阅读数 14

margin:0 auto 可以让 元素居中。理由是auto的时候，浏览器会自动左右配距离。

<html>
    <style>
    div{
        width: 100px;
        height: 200px;
        margin:0 auto;
        border: 2px solid red;
        }
    </style>
    <div></div>
</html>

div可以居中，现在让它浮动起来。

<html>
    <style>
    div{
        width: 100px;
        height: 200px;
        float:left;
        margin:0 auto;
        border: 2px solid red;
        }
    </style>
    <div></div>
</html>

无法居中了，但是margin还是可以起作用，给他具体的值。

<html>
    <style>
    div{
        width: 100px;
        height: 200px;
        float:left;
        margin:0 300px;
        border: 2px solid red;
        }
    </style>
    <div></div>
</html>

我就不理解了明明margin语句是起作用的，为何margin:0 auto;在float后，无法让div居中了呢？

回复
1个回答
avatar
test
2024-07-16

因为float使元素脱离了文档流，auto无法再根据文档位置去计算大小了

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容