Плавающее изображение переполняет родительский div

Question

Я пытаюсь сделать float:right; изображение рядом с пунктом <p>, которые объединены в контейнер <div>. Проблема заключается в том, что родительский <div> изменяет размер height с размером текста в абзаце, это хорошо, но плавающее правое изображение переполняет div, а тот же <div> не изменил размер в соответствии с image height.

.container { 
 
    width: 70%; 
 
    background-color: #777; 
 
    margin: 0 auto; 
 
    padding: 25px; 
 
} 
 
.content { 
 
    width: 100%; 
 
    height: auto; 
 
    float: left; 
 
} 
 
.content .container { 
 
    width: 70%; 
 
    height: auto; 
 
    background-color: white; 
 
    /* 
 
    overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container 
 
    */ 
 
} 
 
.autoportrait { 
 
    width: 20%; 
 
    height: 20%; 
 
    /* 
 
    max-width:205px; 
 
    max-height:265px; 
 
    margin-bottom: 25px; 
 
    */ 
 
    padding: 10px 10px 10px 10px; 
 
    border: solid; 
 
    border-width: 2px; 
 
    float: right; 
 
    clear: both; 
 
}

<div class="content"> 
 
    <div class="container"> 
 
    <!-- 
 
    <main> 
 
    <section> 
 
    --> 
 
    <img class="autoportrait" src="autoportrait.jpg" alt="Autoportrait of me"> 
 
    <h2>Post title</h2> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies. 
 
     Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem 
 
     mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, 
 
     nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu. 
 
    </p> 
 
    <!-- 
 
    </section> 
 
    </main> 
 
    --> 
 
    </div> 
 
</div>

Я пытался использовать overflow: hidden;, но это работает только для одного "пост". Когда я пытаюсь поставить второй, возникает одна и та же проблема, и длина изображений, которые выходят из «контейнера контента», удваивается. Я новичок в HTML/CSS и код, который я пишу для своих собственных знаний. Поэтому я буду признателен, если что-то придумаем.

Привет из Варны, Болгарии!

Answer 1

Сделайте div, чтобы очистить его детей, используя :after псевдокласс.

.container{ 
 
    width: 70%; 
 
    background-color: #777; 
 
    margin: 0 auto; 
 
    padding: 25px; 
 
    border:1px solid red; 
 
} 
 

 
.content{ 
 
    width: 100%; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.content .container { 
 
    width: 70%; 
 
    height: auto; 
 
    background-color: white; 
 
    /*overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container) */ 
 
} 
 

 
.autoportrait{ 
 
    width: 20%; 
 
    height: 20%; 
 
    /*max-width:205px; 
 
    max-height:265px; 
 
    margin-bottom: 25px;*/ 
 
    padding: 10px 10px 10px 10px; 
 
    border: solid; 
 
    border-width: 2px; 
 
    float: right; 
 
    clear:both; 
 
} 
 

 
.container:after { 
 
    visibility: hidden; 
 
    display:table; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
    }

<div class="content"> 
 
    <div class="container"> 
 
      <!--<main> 
 
        <section>-->  
 
         <img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me"> 
 
         <h2>Post title</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. 
 
    </p> 
 
       <!--</section> 
 
       </main>--> 
 
      </div> 
 
    <div class="container"> 
 
      <!--<main> 
 
        <section>-->  
 
         <img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me"> 
 
         <h2>Post title</h2> 
 
         <p> 
 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. 
 
         Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. 
 
         Phasellus vel magna ut massa tempus ultricies. Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. 
 
         Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. 
 
         Nulla venenatis, nulla sit amet suscipit vulputate, sem mauris rutrum erat, id pharetra dui nunc at dui. 
 
         Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. 
 
         Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, nec consectetur elit leo a ligula. 
 
         Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu. 
 
         </p> 
 
       <!--</section> 
 
       </main>--> 
 
      </div> 
 
     </div>

Answer 2

Простейшее решение заключается в использовании overflow: hidden; на .content .container.

Я знаю, что вы сказали, что пытались это сделать ранее, и даже если бы он прокомментировал это в .content .container, но он работает для меня. Возможно, проблема заключалась в том, где/как вы разместили вторую статью в своей разметке.

.container { 
 
    width: 70%; 
 
    background-color: #777; 
 
    margin: 0 auto; 
 
    padding: 25px; 
 
} 
 
.content { 
 
    width: 100%; 
 
    height: auto; 
 
    float: left; 
 
} 
 
.content .container { 
 
    width: 70%; 
 
    height: auto; 
 
    background-color: white; 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
} 
 
.autoportrait { 
 
    width: 20%; 
 
    height: 20%; 
 
    /* 
 
    max-width:205px; 
 
    max-height:265px; 
 
    margin-bottom: 25px; 
 
    */ 
 
    padding: 10px 10px 10px 10px; 
 
    border: solid; 
 
    border-width: 2px; 
 
    float: right; 
 
    clear: both; 
 
}

<div class="content"> 
 
    <div class="container"> 
 
    <img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me"> 
 
    <h2>Post title</h2> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies. 
 
     Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem 
 
     mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, 
 
     nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu. 
 
    </p> 
 
    </div> 
 

 
    <div class="container"> 
 
    <img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me"> 
 
    <h2>Post title</h2> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies. 
 
     Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem 
 
     mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, 
 
     nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu. 
 
    </p> 
 
    <!-- 
 
    </section> 
 
    </main> 
 
    --> 
 
    </div> 
 

 
</div>