html - float 图片溢出父div

我正在尝试将float:right;图像放在段落<p>旁边，该段落嵌套在<div>容器中。问题是父级<div>用段落中文本的大小调整其height的大小，这很好，但是浮动的右侧图像溢出了div，并且相同的<div>并未根据。

.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>

我尝试使用image height，但这仅适用于单个“发布”。当我尝试放置第二个图像时，出现相同的问题，并且从“内容容器”流出的图像长度加倍。
   我是HTML / CSS的新手，我编写的代码仅出于我自己的知识。因此，如果我们能解决问题，我将不胜感激。

来自保加利亚瓦尔纳的问候！

最佳答案

使用:after伪类使div清除其子级。

.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>

关于html - float 图片溢出父div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41743134/