CSS中浮动的原理和规则

html-css022

CSS中浮动的原理和规则,第1张

任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动,事实上即使是像 span 和 strong这样的行内置元素也可以很好地进行浮动。

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。

如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

注意:

最为一名前端工程师,我想知道这个是不是误人子弟的视频教程。。一般子元素有浮动 父元素就要清除浮动的。这个解决BUG非常不好。。而且你所说的IE6 BUG一般都是在为清除浮动造成的。建议查看淘宝CSS 清除浮动样式

李炎恢老师讲得挺好

1.XHTML学前准备

2.HTML基本结构

3.排列清单控制标记

4.表格(上)

5.表格(下)

6.图像

7.超链接

8.表单

9.框架

10.多媒体

11. 其他标记

CSS入门基础

CSS文字与文本

CSS背景与列表

CSS边框与边界

CSS区块、浮动、定位、溢出、滚动条

CSS链接、光标.、DHTML、缩放

CSS滤镜

CSS定义选择器

CSS构造模型

CSS构造颜色,背景与图象

CSS构造列表

CSS构造超级链接

CSS构造表格

CSS构造表单

布局