Могу ли я создать плавающий элемент и сохранить его в макете?

Question

У меня есть следующий код (доступен для пробного запуска здесь ):

<div style="margin:10px">
    <div class="alert-message block-message warning">
         <h3>Hello World</h3>
         <p>You're about to take an action which cannot be undone.</p>
         <form method="post" action style="float:right">
             <button class="btn danger" type="submit">For Reals!</button>
              <a href="#" class="btn">Nah.</a>
         </form>
     </div>
</div>

Точка выше должна иметь фоновое поле с плавающими элементами управления в правом нижнем углу оповещения.

К сожалению, как видно из примера, элементы формы, по-видимому, не включены в макет, поскольку фон не распространяется на них. Это можно обойти?

Вы можете просмотреть страницу редактирования здесь: http://jsdo.it/rfkrocktk/h5IL

Answer 1

Если в дочернем элементе родителя есть float, то вам нужно clear родительского элемента.Итак, напишите так

.alert-message.block-message{
overflow:hidden
}

Answer 2

Вам нужно очистить поплавки, чтобы они вернулись к базовому уровню. Код протестирован и работает.

<div style="margin:10px">
    <div class="alert-message block-message warning">
    <h3>Hello World</h3>
    <p>You're about to take an action which cannot be undone.</p>
    <form method="post" action="" style="float:right">
    <button class="btn danger" type="submit">For Reals!</button>
    <a href="#" class="btn">Nah.</a>
    </form>
<div style="clear:both"></div>
</div>
</div>

Answer 3

Попробуйте добавить <div style="clear:both;"></div> после тега </form>.