Почему мои HTML элемент и форма не распознаются браузером?

Question

Может показаться, что мне не хватает чего-то очень простого, но я не могу ради этого понять.

У меня есть <form>, завернутый в <div class="form">, и по какой-то причине в браузере форма и div имеют высоту 0, и весь контент переполняется. Когда я проверяю документ из браузера, браузер не распознает этот div или форму.

Вот проблемная область здесь:

Кроме того, вы можете проверить его на этом сайте здесь: Веб-страница

<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 и формы есть height:0 и переполнение содержимого?

Если так, то это потому, что у div содержимого есть атрибуты float css. для этого нужно добавить в конец содержимого div со стилем clear:both

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

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