html - 带有2个浮点右元素的复杂clearfix，我只想清除一个

这是小提琴jsfiddle example

如果您调整窗口的大小，（在小提琴中）使<cite>“-William Shakespeare”降到粉红色文字下方。这将其放置在<blockquote>之外，并使其拥挤。如何获取<blockquote>清除<cite>而不清除照片？

<div>
  <img /> <!-- floated right -->
  <blockquote>
    bla bla bla
    <cite>- some guy</cite> <!-- floated right -->
  </blockquote>
  <p>loaral ipsum yadda yadda</p>
</div>

最佳答案

将overflow:hidden添加到blockquote，以便容器包装其浮动的子代。

我在blockquote周围添加了边框，因此您可以直观地看到添加overflow:hidden;时发生的情况

aside img {
    float: right;
    width: 50%;
    margin: 0 0 1em 1em;
}
aside div blockquote {
	font-size: 1.25em;
	color: #ec008c;
	text-align: justify;
    overflow:hidden;
  border: 1px solid #000;
}
aside div blockquote cite {
	font-size: 0.8em;
	color: #000;
	margin-right: 0.313em;
	margin-top: 0.125em;
	float: right;
}

<aside id="navLoveStory">
    <figure>
        <img src="http://media-cache-ak0.pinimg.com/736x/48/b5/33/48b5333dd2925d3fc6c9e80ffbacf96f.jpg"/>
    </figure>
    <div>
        <blockquote>&quot;When I saw you I fell in love, and you smiled because you knew.&quot; <cite>-William Shakespeare</cite>
        </blockquote>
        <p>Resize the window, so that the &lt;cite&gt; "- William Shakespeare" drops below the pink writing.  This places it outside the &lt;blockquote&gt; and it crowds this text.  How do I get the &lt;blockquote&gt; to clear the &lt;cite&gt; but not the photo?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec est in risus bibendum gravida. Fusce justo tortor, malesuada vitae scelerisque ac, pulvinar ac est. Pellentesque facilisis justo elit, sed eleifend neque imperdiet nec. Mauris a diam sit amet neque aliquet sodales. Aliquam ullamcorper tristique massa, eget tincidunt ante mollis et. Fusce commodo urna euismod ligula iaculis, sit amet finibus erat ultricies. In urna ex, pellentesque eu quam id, imperdiet sollicitudin risus. Aliquam laoreet felis nec nunc fringilla, nec fringilla diam varius. Mauris lobortis nisi et lorem sodales molestie. Pellentesque non enim vestibulum, ultrices sem sed, tristique orci. Duis sagittis pharetra odio, vitae placerat ante volutpat nec. Ut auctor magna sit amet arcu accumsan, a porttitor sapien consequat. In hac habitasse platea dictumst. Praesent in elit quis velit eleifend vulputate.</p>
        <p>Fusce est lacus, egestas eget nisl eget, mollis fermentum nunc. Integer et fringilla risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque non ultricies ligula, id varius erat. Duis ornare porttitor lobortis. Nunc semper pellentesque augue, non accumsan odio placerat eu. Pellentesque eros eros, posuere quis lorem sed, pharetra finibus ipsum. Proin rhoncus eu metus vel vulputate. Etiam nibh nisi, venenatis sit amet mattis nec, dapibus in elit. In pellentesque, libero sit amet tincidunt porta, odio dolor dictum dolor, sit amet molestie felis massa tincidunt ex. Sed sed volutpat magna. Fusce hendrerit orci felis. Phasellus risus erat, ullamcorper eu congue et, iaculis at justo. Donec bibendum accumsan porttitor.</p>
    </div>
</aside>

关于html - 带有2个浮点右元素的复杂clearfix，我只想清除一个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30107211/