div бритвы пропускает css :: after

Question

Это мой частичный просмотр MVC,

  <p class="contain mutliOptions method" id="paymentOptions">                                       
      @Html.Partial(MVC.Payment.Views._PaymentMethods, Model)
  </p> 

Когда он рендерит элементы в представлении, рендеринг вне тега p, как показано ниже,

Почему выделенный div пропускается за пределы div, есть идеи?

Answer 1

Проблема, на самом деле возникшая из тега <p>, представляет собой элемент уровня блока, который включает «пропуск тега», который автоматически пропускает закрывающий тег и закрывается сам, если эти элементы, упомянутые ниже, найдены перед соответствующим конечным тегом </p>:

• <address>
• <article>
• <aside>
• <blockquote>
• <div>
• <dl>
• <fieldset>
• <footer>
• <form>
• <h1> до <h6>
• <header>
• <hr>
• <menu>
• <nav>
• <ol>
• <pre>
• <section>
• <table>
• <ul>
• другой элемент <p>

Следовательно, это означает, что указанные выше элементы блока не могут быть вложены в элемент <p>.

Вместо использования тега абзаца для вложения других элементов, упомянутых выше, вы можете просто использовать <div> тег для вложенных <div> с:

<div class="contain mutliOptions method" id="paymentOptions">                                       
    @Html.Partial(MVC.Payment.Views._PaymentMethods, Model)
</div> 

Ссылка:

Элемент абзаца HTML(MDN)

Answer 2

Просто добавьте следующий данный div после вашего частичного помощника.надеюсь, что это сработает.

<p class="contain mutliOptions method" id="paymentOptions">                                       
      @Html.Partial(MVC.Payment.Views._PaymentMethods, Model)
      <div style="clear:both"></div>
</p>