CSS布局模型
流动布局
流动布局,为网页自带布局方式也就是说网页默认情况下就是采用流动布局方式来完成对HTML元素的布置。
流动布局主要有2大特征：
- 从块级元素上来说,块级元素在网页上默认采用从上到下的顺序来完成分布，每个块级元素独自一行，不能与其它的任何元素共享一行。并且块级元素默认的宽度，在不单独设置的情况下，默认就是100%；
- 从行内元素上来说，行内元素在网页上默认采用从左到右的顺宇来完成分布，它可以与其他的行内元素共享一行，但是行内元素的宽度，需要根据内容来决定。
但是，对于网页来说，单使用流动布局来设计网页，网页绝对丑的无法形容!
浮动布局
由于块级元素的特点是:每个块级元素独占1行空间，这对于HTML页面设计是非常烦的事情，所以我们需要通过某些手段，将块级元素变成具有行内元素的特点。浮动技术，就是其中的一种手段。所谓的浮动，就是将块级元素元素从元素结果树中取出，上浮到结构树的上层，并且使块级元素可以向行内元素一样，可以共享一行。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。（float有两个值，left和right）
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动效果
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
关于清理
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
语法：clear：属性值
| 值 |
描述 |
| left |
在左侧不允许浮动元素。 |
| right |
在右侧不允许浮动元素。 |
| both |
在左右两侧均不允许浮动元素。 |
| none |
默认值。允许浮动元素出现在两侧。 |
| inherit |
规定应该从父元素继承 clear 属性的值。 |
使用原因：
先说一句：我们把浮动元素想象成浮于下层之上的另一层
看图：
前情提要：图片和阴影文字是在紫框内部的，因为这里设置了浮动，红框是位于紫框下方的，前面的两行英文字母是紫框内部的，后面从猪开始的字母位于红框内。
在使用浮动的时候，有个特殊情况，当一个块中包含了其他元素，我们对块中的元素设置float属性（本例：图片和阴影文字），而没有对这个块（紫块）进行浮动处理，那么这些元素就会抽离出这个块（也就是这些元素的父类），它们浮动的位置是依据他父亲（紫块）的边界而定的，也就是说这些元素左浮动，就是以它父亲左边框为准，右浮动，就是以它父亲的右边框为准。
并且抽离出来之后，那么这个块（紫块）就不会再包围住这些元素（图片和阴影文字），这些设置了浮动的元素就会显示在这个块中“没有设置浮动且位于它们前面的元素”的下方。位于浮动元素后面的且在块内的普通元素会去补上这个浮动元素的位置。前面说的元素都位于大块（本例：紫块）之中。这里说一句，虽然现在抽离出来了，效果看上去是位于它前面的元素（前两行字母）下方，其实是：它是在它原有位置这个垂直方向上浮，然后在或左或右靠近边框，只是多个浮动的元素会自动往前一个浮动元素后边靠而已，所以就看到了它位于前面元素的下方。我们可以想象这是个三维空间（或是正方体）有个底面，开始没设置浮动时，全部元素都位于底面，然后设置浮动，浮动的元素就从底面上浮到了顶面，上浮的元素单独在一个平面，但是我们俯视看的时候，它会把它原来那个底面位置挡住，上浮的元素会朝它前面的那个浮动元素靠在同一条水平线上，直到留下空间不够，他会往下靠。所以我们调整的任何属性值，都只是为了从俯视角度更好看。从这个意义来说，我们是可以调整浮动元素的位置和底面没有浮动元素的位置进行效果的调整。下面我会说。
在这个块（紫块）的外面的那些元素，也就是红块部分哪些，就会接着这个块（紫块）进行显示，因为没有浮动的元素都是流动布局。浮动的元素抽离出来不占有位置。
图片和文字会在浮动元素周围出现环绕效果。其他的不会出现这种情况，所以可以看见红框内的文字环绕了浮动元素，而红框就被遮挡了。这里图片和右边灰色阴影的文字设置了浮动。
代码：
调整图片的位置：（看。。。覆盖了上面元素）
添加了代码：（在图片属性设置中）
.news #img01 {
float: left;
margin-top: -1em;
}
为了处理这种情况（挡住红框，挡住字体，文字环绕），我们可以有两种方式：
1）我们对这个块（也就是紫块）进行浮动，也就是对这些浮动元素的父类进行浮动（前提是父类紫块没有固定高度），那么这个块就会包围住这些元素了。但是由于现在这个块都浮动了，那么这个块（紫块）后面的元素（红块）会自动填补这个块的位置，我们就看到紫块挡住了红块，那么我们就可以给这些元素（红块）设置clear:both，那么后面这些块（红块）就会跳到这个浮动块的下方。（文字图片会有环绕效果，遇到浮动元素，所以红框里文字环绕了紫框，而没有被挡住）
---------没加clear效果（包裹住了图片和阴影文字，前提外面这个块也就是紫色块没有设置高度，让它自适应）
---------加了clear效果
2）我们可以在这个块（紫块）里面的其他所有添加了浮动的元素最后面添加一个块，为这个块设置clear:both，因为这个块在那个大块（紫块）内部，所以设置了这个值后，添加的这个块左右不能出现浮动元素，所以这个小块就会出现在这些浮动元素的下方，那么自然而然，这个大块就撑开了，就包裹住了这些浮动元素。这里的小块没有高度。
代码：
浮动总结
1、浮动元素单独位于一层，在（上层），且它后面的浮动元素，会和它靠在一条水平线上，直到留下空间不足，才跳到下一行中。
2、浮动元素留下来的下层位置会被它后面的普通元素占据
3、浮动元素可以通过改变外边距来调整位置
4、我们看到的效果是浮动元素层（上层）和普通元素层（下层）叠加的效果
5、使用清理clear是让这个元素左或右或左右都没有浮动元素，也就是说从俯视角度来说的左或右或左右没有浮动元素。那么这些普通元素就会跳到浮动元素的下方，那样从俯视角度来看左右才没有浮动元素。就是说使用clear的普通元素会跳到浮动元素下方。不在浮动元素左右或被遮挡的普通元素不受影响，主要针对浮动元素左右或被遮挡的普通元素。