清楚了 CSS 盒模型的基本概念，接下来将会探讨网页布局的基本模型。
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。但布局模型是建立在盒模型基础之上，CSS 三种基本网页布局模型：流动模型（Flow）、浮动模型（Float）、层模型（Layer）。

1、流动布局模型

在默认状态下，HTML 网页元素都是根据流动模型（Flow）来分布网页内容的。
流动布局模型具有 2 个比较典型的特征：

• 块状元素都会在所处的包含元素内，自上而下按顺序垂直延伸分布，因为在默认状态下，块级元素的宽度都为100%，实际上，块状元素都会以行的形式占据位置（每一个标签都显示着自己本来默认的那个宽高）。
  
• 在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示（内联元素可不像块级元素独占一行的）。如果没有更多的空间，剩下的内容会放在下一行。
  
  流动模型也就是常说的文档流。
  文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
  流动模型是默认的网页布局模式。浏览器在页面上默认使用文档流的方式摆放HTML标签。

2、浮动布局模型

块状元素都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？设置元素浮动就可以实现。 任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

设置左浮动

脱标

特别需要注意的是，设置了浮动的元素，脱离标准流（脱标）。这样说可能不好理解，我们下面来一个具体的例子。

首先写三个不浮动的 div。


然后我们给 box2 盒子（黄色的盒子），设置右浮动来看看效果：

.box2 {
  background-color: yellow;
  float: right;
}

box2 盒子（黄色的盒子）脱离了文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。而 box3 盒子（蓝色的盒子）则替代了原来 box2 的位置。

给 box2 盒子（黄色的盒子），设置左浮动来看看效果：


box2 盒子（黄色的盒子）脱离了文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了 box3 盒子，使 box3 盒子从视图中消失。我们可以理解为 box2 盒子像羽毛一样飘在 box3 盒子上面，挡住了 box3 盒子。

示例2：
在下面的示例中，3个div在浏览器中按正常的块标签文档流显示，每个标签占独立的一行，上下排列。

为d-float的div标签设置float: left;，效果如下：

页面布局发生了变化，绿色的d1和d2标签会忽略橙色的d-float标签的存在，在文档流中依次排列。d-float标签从正常的文档流中浮动起来，好像飘浮在其他元素的上面。这就是最基本的浮动概念。
下面为d1和d2标签填充一些内容，如下：

发现，虽然d1和d2所在的盒子会忽略浮动元素的存在，但是盒子中的内容，也就是文字会环绕浮动元素排列。
除了设置左浮动外，还可以设置右浮动。

d-float就显示在右侧。

浮动布局中的盒模式计算

在实际的页面设计中，经常会有分栏设计。如下所示，3个d-float都是左浮动元素，所以没有按照块标签正常的文档流上下依次显示，而是依次向左浮动排列在页面上。

现在如果想让3个橙色的浮动元素均匀的填充在绿色的div中，那么d-float内容区域的宽度和高度应该设置多少呢？如下所示：

精确计算的必要性，即使1px的误差，也会影响效果。如下所示：将540px改成539px，页面布局就发生了巨大的变化。

现在d-float的高度是120px，但有时候我们不想明确指定浮动元素的高度，想让内容决定高度，因为浮动元素可能会显示一些不确定的内容，例如新闻，文章等。这里，在div标签中添加一些内容，120px的高度已经不够用了。所以删除d-float的120px高度设置。也不能达到效果，现在使用清除浮动解决这个问题。

清除浮动

这里，绿色的d-parent的高度不应该是固定值180px，删除掉。
接下来在所有浮动元素的后面添加一个div，类名为clear。如下所示，在CSS中设置clear。这样浮动元素所在盒子的高度和绿色的盒子会随着浮动元素内容的增加而自由伸缩。

当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。

首先我们写一个示例，不设置浮动，第一个盒子的父元素不设置高度。


一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。
修改上面的例子，给 box1 盒子设置一个左浮动。再来看看效果。


父容器确实没有高度了，下面的盒子（蓝色的盒子）确实跑到浮动盒子（红色的盒子）下面去了。出现这种情况，我们需要清除浮动。

也可以通过在父级上增加属性overflow：hidden来实现清除浮动

清除浮动的方法有很多，最后再介绍一个常见的用得比较多的方法：使用伪元素来清除浮动，是在浮动元素的父元素上设置伪元素，此处是 box 上设置。


清除浮动后的效果：

在浮动元素的父级元素上设置伪元素，也就是说我们把 <class="box"> 改成 <class="box clearfix">，在其他地方使用的时候，也是只需要在标签中添加上一个 class 名 clearfix，并直接复制上述清除浮动的伪元素代码即可。当然我们这里还可以直接给父元素加上高度，来解决这个不利影响，不过一般不建议这么做，因为有时候我们也不知道高度具体是多少，容易出问题，所以还是建议用伪元素来清除浮动。

小结

浮动特性

• 浮动元素有左浮动(float:left)和右浮动(float:right)两种。
• 浮动让行内元素或块元素自动转化为行内块元素。
• 浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来。
• 相邻浮动的块元素可以并在一行，超出父级宽度就换行。
• 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果。
• 父元素内整体浮动的元素无法撑开父元素，需要清除浮动。
• 浮动元素之间没有垂直margin的合并。

清除浮动方法

在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
父级上增加属性overflow：hidden
父级上使用成熟的清浮动样式类clearfix

.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}

3、练习

（1）完成下列图片列表