段落的文本不会呈现在浮动图像下方，但段落本身会呈现

Question

请考虑以下 HTML 和 CSS

的片段

p{
    background-color: chartreuse;
    text-align: justify;
}
img{
    float: right;
    background-color: transparent;
    margin: 0 0 0 10px;
}

<!--note this image has transparent background -->
<img src="http://i.imgur.com/Qvcvk8i.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur autem reiciendis similique sapiente tempore nulla illo atque, eius cum. Nemo, blanditiis quasi. Ea reprehenderit magni officia, eligendi sint, rerum ex error in? Voluptas maiores, iure quo, tempore ipsa suscipit qui, reiciendis ea veritatis quis maxime, tempora dolor. Voluptatibus accusantium, deserunt vero perferendis reiciendis aperiam natus dicta officiis cupiditate voluptatum veniam non quisquam illo aspernatur enim dolor doloribus maxime nostrum accusamus mollitia incidunt in sit. Accusamus eligendi corporis libero, qui deleniti quisquam laudantium ipsam nostrum minus, cupiditate aut ratione, voluptatibus delectus ea error recusandae! Officiis maxime delectus ad enim quasi deserunt reiciendis autem non veniam. Doloremque non commodi deleceiustus ab, perspiciatis labore! At porro illo suscipit, nesciunt nobis. Quasi non ratione, dolorum hic, soluta saepe vel pariatur modi blanditiis harum omnis! Voluptatibus non, expedita atque! Quod sapiente aliquam distinctio eius? Neque magnam temporibus dolore et officia atque hic, facilis. Ut alias numquam ab, odio voluptates vitae molestias possimus recusandae eos incidunt voluptatibus earum excepturi hic explicabo, nulla sequi aperiam impedit quos nam sit commodi nesciunt atque dolore quam. Doloremque optio suscipit cumque, ducimus similique repellendus molestiae, deserunt autem quis quo sed minus, iure voluptatem molestias, vel quod qui vitae ut voluptatum!</p>

（请在整页中打开此片段）
如您所见，段落在图像下方伸展，段落的背景颜色证明了这一点。所以我的问题是为什么 text?

Answer 1

浮动的全部意义在于文本环绕浮动元素。如果文字不换行，而是像浮动元素不存在一样在浮动元素上流动，那么浮动的概念就没有意义了。

背景在浮动元素下流动，因为它不是文本；这是布局。浮动元素对其周围的布局没有影响；它的仅目的是让文本和其他浮动环绕它。（十多年来，人们一直在滥用浮动进行伪布局，但这是一个单独的问题。）

段落的文本不会呈现在浮动图像下方，但段落本身会呈现

paragraph's text does not render below floated image but paragraph itself does

html

css

css-float