无法理解div如何工作

Question

我有一个div下面两个浮动div（一个浮动左边，另一个浮动）。当我打开元素检查员时，我发现了一些奇怪的东西。为什么css属性clear: both下面的div与前两个重叠？此外，当我更改div的高度时，元素检查器显示div不再包含其内容。这是两个截图，以显示我的意思。代码位于屏幕截图下方。

在css中没有设置高度：

css中类“tag”的高度设置为200px：

HTML for page

CSS for page

Answer 1

CSS中存在语法错误。你在其他课程中有一些课程没有工作，你也有一些不公开的括号。我把它修好了

        #container {
        width: 900px;
        min-height: 500px;
        margin: auto;
        background: #DDDDDD;
        }


        .entry {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        }


        .title {
        text-align: center;
        }

        .name {
        padding: 0px 10px;
        }

        .tag {
        display: inline-block;
        }

        .link {
        border: 1px solid black;
        display: inline-block;
        padding: 10px;
        text-decoration: none;
        }

        .info {
        width: 610px;
        margin: auto;
        }

        .input-text_area {
        width: 300px;
        height: 250px;
        padding: 0;
        border: none;
        resize: none;
        }

        .input-text_field {
        width: 300px;
        padding: 0;
        margin: 0;
        border: none;
        }

        .input-button {
        width: 75px;
        height: 50px;
        margin: 2px 0px;
        display: block;
        float: right;
        }

        select {
        float: right;
        margin: 0px;
        }

        .right_half {
        float: left;
        padding: 1px;
        height: 300px;
        width: 300px;
        }

        .left_half {
        float: left;
        padding: 1px;
        height: 300px;
        }

        .tags {
        height: 200px;
        }
        label {
        display: block;
        }

        .text_field {
        width: auto;
        }


        .block-label {
        display: block;
        }