2浮動權元素複雜clearfix，我只想清除一個

Question

這裏是小提琴jsfiddle example

如果調整窗口的大小，（在小提琴），以便<cite>「 - 莎士比亞」滴粉紅色的下方寫作。這將它放在<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> 

Answer 1

添加overflow:hidden到使容器將其包裝是浮動的孩子。

我加了邊框身邊，所以你能想象發生了什麼，當你添加overflow:hidden;

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

Answer 2

包裹和cite在自己的格，並affly高度的::after pseudoelement。

例子： http://jsfiddle.net/b5a8o5h8/3/

Answer 3

你可以使用在的::after僞元素來清除其中包含的浮動項目（S），像這樣：

blockquote::after{ 
    content:""; 
    display:block; 
    clear:both; 
    height:0; 
    width:0; 
}