Q

CSS的float弊端

2013-05-10 71 views 0 likes

0

这里去代码：CSS的float弊端

<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.If眼前飘浮appering第二张图片我们把第一张图片，以第二的img一切正常。

2013-05-10 Maizere Pathak.Nepal

A

回答

1

浮动元素被取出normal document flow:

的由于浮子是不是在流程中，浮动框之前和之后创建的非定位块盒流动垂直仿佛浮子不存在。但是，根据需要缩短浮动框旁边创建的当前和随后的线框，以便为浮动框的边距框腾出空间。

只有行框（内联格式化上下文中的元素）关于浮动，通常这是以文本的形式。还记得，浮子将始终被定位在顶部（在堆叠顺序），在流块级元素碰撞时，却会出现后面所有行框..

浮子的内容如同浮动产生新的堆叠上下文一样堆叠，除了实际上创建新的堆叠上下文的任何定位元素和元素参与浮动的父堆积上下文。浮标可以在正常流程中与其他框重叠（例如，当浮标旁边的正常流动框具有负边界时）。发生这种情况时，浮动将呈现在未定位的流入块前面，但在流入内联后面。

上的Visual Formatting Model彩车的部分是有益的，如果你有兴趣学习的具体

^{参考文献：Section 9.4, Floats, CSS 2.1 Specification}

2013-05-10 20:31:02 Adrift

+0

请问你可以用一个例子来解释一下，_when与流动块级别的元素碰撞，但它会出现在所有行框后面。 – dkjain 2016-01-11 08:56:49

0

是。这是正常的和预期的。如果你想要第一个，你需要把它们都浮起来。

2013-05-10 20:32:50

1

您从W3Schools复制的例子，但没读：

元素如何浮法元素水平浮动，这意味着元素只能浮动左或右，不是向上或向下。

浮动元素将尽可能向左或向右移动。通常这意味着一直到包含元素的左侧或右侧。

2013-05-10 20:33:30 WooCaSh

+0

大声笑谢谢你的信息 – 2013-05-10 20:34:33

+0

如果我的答案有帮助，请将其标为好答案。谢谢。 – WooCaSh 2013-05-17 19:06:00

+0

这是不是意味着它会采取任何其他元素的位置 – 2013-05-18 15:56:10

0

我不会使用浮动，只需使用display：inline-block;它将按照与编写代码相同的顺序显示您的项目。

2013-05-10 20:42:21 Cam

相关问题