gpt4 book ai didi

Css float 缺点

转载 作者:太空宇宙 更新时间:2023-11-04 04:35:42 27 4
gpt4 key购买 nike

代码如下:

 <style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
<body>
<img src="klematis_small.jpg" style="width:107px; height:140px">
<img class="thumbnail" src="klematis_small.jpg" style="width:107px; height:150px">

令人困惑的是为什么第二个 img 在第一个 img 之前出现。如果我们将第一个 img 放在第二个 img 上,一切都按预期工作。

最佳答案

float 元素从normal document flow:中取出

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

只有行框(内联格式化上下文中的元素)尊重 float ,通常是文本形式。还请记住,当与流入 block 级元素发生碰撞时, float 将始终位于顶部(按堆叠顺序),但它会出现在所有行框的后面..

The contents of floats are stacked as if floats generated new stacking contexts, except that any positioned elements and elements that actually create new stacking contexts take part in the float's parent stacking context. A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When this happens, floats are rendered in front of non-positioned in-flow blocks, but behind in-flow inlines.

Visual Formatting Model 中关于 float 的部分如果您有兴趣了解具体细节,这将很有帮助


引用文献:Section 9.4, Floats, CSS 2.1 Specification

关于Css float 缺点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16490327/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com