段落的文本不会在浮动图像下方显示，但段落本身会显示 [英] paragraph's text does not render below floated image but paragraph itself does

问题描述

请考虑以下HTML和CSS代码段

Please consider following snippet of HTML and 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>

（请在整页中打开此代码段）

，因为您看到该段落在图像下方很明显段落的背景色证明了这一点。所以我的问题是为什么文本不是？

(please open this snippet in Full Page)
as you can see that paragraph is streching below image, background colour of paragraph proves it. So my question is why not the text?

推荐答案

整个浮动点是为了文本环绕浮动元素。如果文本没有换行，而是像没有出现在浮动元素上一样流动，那么浮动的概念将毫无意义。

The whole point of floating is for text to wrap around the floating element. If the text didn't wrap, and instead flowed over the floating element as though it were not there, then the concept of floating would be meaningless.

浮动元素，因为它不是文本；它是布局。浮动元素对其周围的布局没有影响。它的 only 用途是用于文本和其他浮动内容。 （十多年来，人们一直在滥用浮动布局进行伪布局，但这是一个单独的问题。）

The background flows under the floating element because it is not text; it is layout. A floating element has no effect on its surrounding layout; its only purpose is for text, and other floats, to wrap around it. (People have been abusing floats for pseudo-layouts for well over a decade, but that's a separate issue.)

这篇关于段落的文本不会在浮动图像下方显示，但段落本身会显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！