Ошибка в верстке при написании простой формы. Кнопки и чекбокс вылетают за пределы формы

Question

Есть простая форма

<!DOCTYPE html>
<html>
    <head>
        <title>Форма обратной связи</title>
        <style>
            body {line-height:30px; }
            form {width:300px; border:2px solid red; }
            #imya {float:right;}
            #familiya {float:right; }
            #select {float:right; }
            #thief {float:right; }
            #submit {float:right; clear:right} /* вот здесь когда див сабмита делаю выровнять по правому краю браузер выбрасывает за пределы формы */
        </style>
    </head>
    <body>
        <h1>Давайте познакомимся</h1>
        <!-- Начало формы -->
        
        <form>
        Ваше имя: <input type="text" id="imya" name="imya"/><br><!-- Текстовое поле -->
        Ваша фамилия: <input type="text" id="familiya" name="imya"/><br><!-- Текстовое поле -->
        Кто вы?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio" id ="sex_male" name="sex" checked="checked" value="0"/> <!-- Радио кнопки -->
            <span>мужчина</span> <!-- не надо оборачивать в label --> 
            <input type="radio" id="sex_female" name="sex" value="1"/>
            <span>женщина</span><br> <!-- не надо оборачивать в label -->
        Чем занимаетесь? <select id="select" name="profession" size="1"> <!-- Выпадающий список -->
            <option value="1">школьник</option>
            <option value="2">студент</option>
            <option value="3">безработный</option>
            <option value="4">рабочий класс</option>
            <option value="5">офисный планктон</option>
            <option value="6">креативный класс</option>
            <option value="7">интеллигент</option>
            <option value="8">олигарх</option>
            </select><br>
        <textarea  name="text" cols="34" rows="10">Напишите коротко о себе:  
        </textarea><br><!-- Текст -->
        <div id ="thief">
        <span>Я не буду воровать записи курсов</span>
        <input type="checkbox" id="checkbox" value="yes" name="agree"><br>
        </div>
        <!-- Флажок -->
        <div id="submit">
        <input type="submit" value="Послать отзыв"> <!-- Кнопка для отправки формы -->
        <input type="reset" value="Очистить форму">
        </div>
        
        </form>
        <!-- Кнопка для очистки формы -->
        <!-- Конец формы -->
    </body>
</html>

Answer 1

Интересная задача. Верстка конечно не по стандарту мягко говоря, но вопрос - почему если задать последнему элементу float: right; все ломаеться и рамка не оборачиваеться вокруг тега form интересно. Всё, дошло - это особенность float когда элементи випадают из потока. Лечиться это так.

  body {
line-height: 30px;
  }

  form {
width: 300px;
border: 2px solid red;
  }

  #sub {
float: right;
  }

  form:after {
content: "";
display: block;
clear: both;
  }

<h1>Давайте познакомимся</h1>
<!-- Начало формы -->

<form>
  Ваше имя: <input type="text" id="imya" name="imya" />
<div id="sub">
    <input type="submit" value="Послать отзыв"> <!-- Кнопка для отправки формы -->
    <input type="reset" value="Очистить форму">
    </div>
</form>

Хотя почему, именно на последнем элементе все ломаеться, так и не понял...

БЛОГ НА HUSL

Ошибка в верстке при написании простой формы. Кнопки и чекбокс вылетают за пределы формы

Ответы (1 шт):