为什么浏览器无法识别我的HTML元素和表单？

Question

这可能看起来像是我遗漏了一些非常简单的东西，但为了我自己，我不能弄明白这一点。

我有一个包装在<div class="form">中的<form>，由于某种原因，在浏览器、表单和div中，高度为0，并且所有内容都溢出。当我从浏览器检查文档时，浏览器无法识别此div或表单。

下面是问题所在：

此外，您还可以在以下网站上查看：Web page

<div class="form">
    <form>
            <div class="contact">
                <label for="first">First Name:</label>
                <input id="first" type="text" placeholder="First Name"><br>   

                <label for="last">Last Name:</label>
                <input id="last" type="text" placeholder="Last Name"><br>

                <label for="tel">Phone Number:</label> 
                <input id="tel" type="tel" placeholder="(###) ###-####"><br>

                <label for="email">Email:</label>
                <input id="email" type="email">
            </div>



            <div class="address">
                <label for="address-1">Address</label>
                <input id="address-1" type="text" placeholder="Address Line 1"><br>   

                <label for="address-2">Address, Line 2</label>
                <input id="address-2" type="text" placeholder="Address Line 2"><br>

                <label for="city">City:</label>
                <input id="city" type="text" placeholder="City"><br>

                <label for="state">State:</label>
                    <select id="state">
                        <optgroup>
                        </optgroup>
                    </select></br>

                <label for="zip">Zip Code:</label>
                <input id="zip" type="text" placeholder="01234">
            </div>
        </form>

    </div>

Answer 1

你说过div和form有height:0和内容溢出吗？

如果是这样，那是因为内容div具有float css属性。要对其进行fi，必须在content div的末尾添加样式为clear:both的

<div class="form">
    <form>
        <div class="contact">
          ...
        </div>

        <div class="address">
           ...
        </div>
        <div style="clear:both"></div>
    </form>
</div>