Question

请考虑以下HTML和CSS代码段

＆＃13;

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

＆＃13;

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

＆＃13;

（请在整页中打开此片段）
正如你可以看到该段落在图像下方，段落的背景颜色证明了它。所以我的问题是为什么不是文本？

Answer 1

浮动的重点是文本环绕浮动元素。如果文本没有包装，而是流过浮动元素，就好像它不在那里一样，那么浮动的概念将毫无意义。

后台在浮动元素下流动，因为它不是文本;这是布局。浮动元素对其周围布局没有影响;它的唯一的目的是用于文本和其他浮点数来包装它。（十多年来，人们一直在滥用花车进行伪布局，但这是一个单独的问题。）

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

1 个答案: