CSS Clearfix не работает, даже после того, как элемент

Question

У меня есть clearfix, который добавляется к любому элементу с именем класса group В следующем скриншоте вы можете увидеть 2 вещи

1. в правом нижнем углу, вы видите, что clearfix был успешно добавлен в флеш-div, так как был создан элемент after.
2. Вы видите заголовок New post, явно перемещающийся вправо от флеш-сообщения div. Для того, чтобы сделать его более ясным, я указал на край вспышки DIV в красном

div.alert { 
    width: 10rem; 
    margin: 3rem; 
    float: left; 
    border: 2px solid #444; 
    border-radius: 4px; 
    padding: 0.5rem 1rem; 
} 

редактирования; Поскольку я не указал его явно, я надеялся понять, почему clearfix не охватывает всю ширину родительского контейнера. В то же время Пит уже предоставил мне ответ на вопрос, и я должен добавить clearfix к родительскому контейнеру, а не к самому плавному элементу flash.

Answer 1

Я думаю, вы пропустите пункт :after. Он поместит содержимое в конец указанного элемента (не после него), поэтому использование :after, чтобы очистить float от самого флотируемого элемента, не очистит его, так как прозрачность будет помещена внутри этого элемента.

Чтобы это исправить или добавить clear:left к новым стилям после Div или обернуть флэш DIV в элементе с четким затруднительным на нем