非浮动元素的margin对浮动元素无效

最新推荐文章于 2021-07-12 22:41:15 发布

原创最新推荐文章于 2021-07-12 22:41:15 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

21 篇文章

订阅专栏

本文通过一个简单的HTML示例，探讨了CSS中浮动属性的工作原理及其对页面布局的影响，并且介绍了如何使用clear属性来解决由浮动元素引起的布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            overflow: hidden;
        }
        .box{
            width: 70%;
            height: 200px;
            background-color: red;
            /*margin-bottom: 20px;*/
            /*此处的margin有用*/
            float: left;
        }
        .box1{
            width: 100px;
            height: 200px;
            background: aqua;
            margin-top: 20px;
            /*此处的margin不起作用*/
            clear: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
        </div>
        <div class="box1">
        </div>
    </div>

</body>
</html>

参考资料：https://segmentfault.com/q/1010000003114546