CSS中的浮动(浮动)相关技术

浮点数的概念可能是CSS中最令人困惑的概念之一,浮点数经常被误解并导致所有上下文元素浮动的可读性和可用性问题。然而,这些问题的根源不是理论本身,而是开发者和浏览器对理论的解释。

如果仔细阅读浮动概念,你会发现它并不像你想象的那么复杂,大部分问题都是由于IE的旧版本(我只是猜测),如果你知道这些错误,你可以避免这些问题。

让我们试着解决这些问题,澄清一些过去浮动的误解。我们参考相关文章,选择一些你必须理解的重要问题。

关于浮动你应该知道什么
------------------------------------------------------------------------------------------------------------

图形和文本的实践可以追溯到很长很长的时间。这就是为什么这个功能被引入从netscape1.1浏览器和为什么使用CSS浮动属性来实现它。术语浮(浮)是引用添加到HTML 2.0'document发出netscape1.1,描述一元浮侧和停止的方式。

的浮动元素的位置是基于正常文档流,然后从文档流和动作尽可能的左侧或右侧。文字内容是围绕浮动元素。当一个元素从正常文档流中提取,其他元素仍然在文档流将忽略该元素他原来的空间填满。

元素在元素浮动后自动转换为块级元素。元素可以移动到当前行的左边或右边。属性如下:浮点:左,浮点,右或浮点:无

你应该为所有的浮动元素设置宽度属性(除元素,因为它具有隐含的宽度)。如果不设置宽度,结果将是不可预知的。

例如,浮动元素定义宽度属性,是否明确规定的或隐含的。此外,它将填补容器元素尽可能多的,像非浮动的内容,而不给其他内容,他们周围的空间。其次,不像在正常文档流的元素,垂直的保证金(保证金)的浮动元素不叠加。最后,浮动元素可以用块级元素在正常文档流重叠。建议浮动元素不占用任何正常的文档空间,因此建议不要理解重叠的概念,而是要浮动。

首先,我们要记住的一点是,浮动元素只能浮动到左边或右边,而不是浮动到中间。这是许多初学者犯的错误。记住,最基本的规则,浮动元素只能浮动到两边。

当我们做一个浮动的元素时,它会在容器的右边或左边,直到它们浮动。如果我们在同一个方向上再浮动一个元素,它会浮动直到上一个浮动元素的边缘被接触。如果我们浮动更多的元素,它们将一个一个地排列,但是很快就会有足够的空间。当行不能容纳更多浮动元素时,下一个浮动元素将继续排队。

含块或含盒:容器元素是一行或一块元素包含子元素。 U3000

当指定的浮动元素的垂直位置是由其在文档流的原始位置确定,在顶上的电流线,但在水平方向上,它的动作尽可能的容器元素的边缘,但仍遵循容器元素的填充距离(填充)。在同行线的元素排列在浮动元素。

因为浮动元素不占正常文档流空间,块元素并不指定前后浮动元素占据的位置,浮动元素应该的位置,好像他们从来没有存在过。在浮动元素的宽度缩小根据浮动元素的线。在浮动元素将被重新安排占据一个独立的line.ie和FF的元素,在这种情况下,不同的。

如果当前行的水平方向上没有足够的空间来容纳浮动元素,则下一行直到有一行可以容纳元素为止。

任何浮动元素不能超过原始文档位置的上边界。浮动元素的顶部必须与当前行的顶部对齐(或在没有当前行元素时与前块元素的底部边缘对齐)。

要真正理解浮动理论,你必须理解CSS中的行框是什么。不幸的是,为了解释什么是一行,你必须首先理解什么是行的元素。行级元素指的是非块元素,如< >,行是一个逻辑概念。它是一个虚拟矩形,它包含构成行的所有行级元素,其高度至少等于行级元素中的最高高度。

如果我们把所有的列放在div和浮动中:左边是一个一个地排列到左边,如果我们想在页面底部有一个页脚,不需要一个长列,加上清晰:两个都在上面。

使用浮动元素(包括浮动元素)有一个潜在的缺点,这意味着页面是否始终显示效果取决于浏览器的实现是否一致,特别是,如果浮动元素是更复杂布局的一部分,它将变得更加脆弱。

清除浮动
------------------------------------------------------------------------------------------------------------

浮动元素中的元素自动包围浮动元素。如果您不想要这个,您可以使用清除属性来为这些元素设置。这个属性有4组值:清除、左、清楚、右、清楚:清除或清除:否。

清理浮动元素有很多技巧,但没有引入额外的语义标签。下面3种方法比较常见:a)将容器元素浮动在一起B,使用溢出:隐藏在容器元素上的C,使用:CSS伪类。

插入清洁元素是使容器正确包装所有浮动元素的标准方法。这种方式具有拖动容器的底部边缘以包装包含的元素的效果。

基于浮动设计的布局的一个常见问题是,浮动元素不会自动扩展为包含浮动元素。如果要添加所有浮动元素的边框,例如在容器元素上添加边框,则必须显示命令浏览器来扩展容器。

使用:假设我们使用后插入一个点,并设置它的属性{清除:};这是所有你需要做的,但是没有人会接受容器底部有一个间隙,所以我们需要设置{高度:0和{可见性:隐藏;};},以确保无缝。