CSS 浮动模型

浮动模型
1.描述：浮动的框可以左右移动，直到它外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以文档流中的块框表现的像浮动框不存在一样。
2.可选参数的设置
（1）left：移至父元素左侧
（2）right：移至父元素右侧
（3）none：默认，显示于它在文档中出现的位置
3.浮动的几种形式
以下为HTML代码结构：

<div class="box">
    <div class="left">历史</div>
    <div class="main">政治</div>
    <div class="right">地理</div>
<div>

（1）普通文档流的css样式如下：

.box{
    width: 400px;
    border: 1px solid red;
}
.left{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: yellowgreen;
}
.main{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: blueviolet;
}
.right{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: hotpink;
}

效果如图所示（不浮动）：

（2）left框（历史）向右浮动
css代码如下：

.left{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: yellowgreen;
    float: right;
}

效果如图所示（left框向右浮动）：

总结：当把left框向右浮动时，它脱离文档流并向右浮动，直到它的边缘碰到包含box的右边框。

（3）left框（历史）向左浮动
css代码如下：

.left{
    width: 60px;
    height: 60px;
    margin: 10px;
    background-color: yellowgreen;
    float: left;
}

效果如图所示（main框在left框的下面）：

总结：当把left框向左浮动时，它脱离文档流并且向左移动，直到它的边缘碰到包含box的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了main框，使main框从左视图中消失。

（4）三个框均向左浮动
css代码如下：

.box{
    width: 400px;
    height: 120px;
    border: 1px solid red;
}
.left{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: yellowgreen;
    float: left;
}
.main{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: blueviolet;
    float: left;
}
.right{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: hotpink;
    float: left;
}

效果如图所示（三个框均向左浮动）：

总结：将三个框均向左浮动，那么left框向左浮动直到碰到box框的左边缘，另两个框向左浮动直到碰到前一个浮动框。

（5）box框宽度不够
css代码如下：

.box{
    width: 260px;
    height: 120px;
    border: 1px solid red;
}
.left{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: yellowgreen;
    float: left;
}
.main{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: blueviolet;
    float: left;
}
.right{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: hotpink;
    float: left;
}

效果如图所示：（没有足够的水平空间，right框向下移动）

总结：若包含框太窄，无法容纳水平排列的3个元素，则其他浮动块向下移动，直到有足够空间的地方。

（6）浮动框元素高度不同
css代码如下：

.box{
    width: 260px;
    height: 120px;
    border: 1px solid red;
}
.left{
    width: 100px;
    height: 200px;
    margin: 10px;
    background-color: yellowgreen;
    float: left;
}
.main{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: blueviolet;
    float: left;
}
.right{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: hotpink;
    float: left;
}

效果如图所示（不同高度的框，right框被卡住）：

总结：若浮动框元素高度不同，当他们向下移动时，可能会被其他浮动元素卡住。