Question

我需要知道为什么以下代码：

<!doctype html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            *
            {
                margin:0px;
                padding:0px;
            }
            #right
            {
                float:right;
            }
            #content
            {
                margin-top:20px;
            }
        </style>
    </head>
    <body>
        <div id="right">a</div>
        <div id="content">b</div>
    </body>
</html>

在#right div上也应用20px的上限。

Answer 1

缺少两件事：1）明确：正确;在#content中。 2）需要指定宽度，以便您可以应用clear：right而不进行div的堆叠。

<html>
    <head>
        <title></title>
        <style type="text/css">
            *
            {
                margin:0px;
                padding:0px;
            }
            #right
            {
                float:right;
                width:24%;
                border:1px solid red;
            }
            #content
            {
                margin-top:20px;
                width:74%;
                clear: right;
                border:1px solid aboue;
            }
        </style>
    </head>
    <body>
        <div id="right">a</div>
        <div id="content">b</div>
        <div style="clear:both;"></div>
    </body>
</html>

我添加了边框，因此更容易查看。

Answer 2

严格来说，它没有。（边距不适用于#right）浮动将元素从文档流中取出。

添加明确：对#content

和浮动元素〜应该有宽度。

Answer 3

当你：

时，它可以正常工作

#content {
    margin-top: 20px;
    clear: right;
}

浮动和边缘

3 个答案: