一. 为什么要有浮动

浮动的英文叫flow.

通过前面的学习我们知道了块级元素独占一行, 可以有宽和高等等.

也知道了行内元素是流式排列的, 不能设置宽和高等等.

那么能不能让块级元素在一行排布, 能不能让行内元素也可以设置宽和高, 让行内元素的padding和marging像块级元素一样好用呢?

答案是可以的, 让这些元素浮动起来.

在标准文档流(normal flow)下, 元素被分成了三六九等: 块级,行内, 甚至行内块等. 才有了特性上的不同.

当让这些元素浮动起来之后, 就不分块级和行内了, 宽高属性大家都可以随便设置,margin,padding, border放心使用, 并且margin塌陷的疾病也治好了.

腿也不疼了, 腰也不酸了,一口气可以上到五楼了.

二. 浮动的基本使用

浮动之后元素最大特点就是不再受标准文档流的限制, 就是俗称的"脱标"或"脱档".

所以块级元素可以在一行了, 行内元素也可以直接设置宽高了. 因为这个时候他们已经不再是传统意义上的块级元素和行内元素.

想让哪个元素浮动非常简单, 只需要给这个元素添加一个属性:

float : left;
/*或者*/
float : right;

即可.

浮动有两种: 左浮动和右浮动.

先研究左浮动.

2.1 左浮动

左浮动的元素,首先脱离文档流, 然后努力向左浮动, 直至碰到他的父容器的左边缘或者另外一个浮动元素的右边缘, 然后停止浮动
并且其他不浮动的元素就像不存在这个浮动元素一样在文档流中布局.

有 3 个div布局如下:

<style>
*{
    padding: 0;
    margin: 0;
}
.one{
    width : 200px;
    height : 200px;
    background-color : pink;
}
.two{
    width : 150px;
    height : 150px;
    background-color : gray;
}
.three{
    width: 250px;
    height: 250px;
    background-color: lightgreen;
}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

案例1:

让第 1 个div左浮动

.one{ float : left}

说明:

• 因为第一个左浮动, 所以第二个div会感受不到第一个div的存在, 正常在文档流流中布局, 跑到了第一个的下面去了.

案例2:

让第 1 个, 第 2 个 div都浮动

说明:

• 由于第二个也开始浮动, 两个浮动的元素不允许重叠在一起, 所以他在使劲向左浮动的时候就紧挨在了第一个的右边.

• 第三个是文档流中的元素, 感受不到浮动元素的存在, 所以他就跑到了第一个的下面.

案例3:

让 3 个div均浮动.

说明:

• 第三个也会努力的向左浮动, 直到碰到第二个.

2.2 左浮动的进一步研究

为了进一步研究浮动, 我们把三个要浮动的元素嵌套到一个小的容器中.

<style>
* {
    padding: 0;
    margin: 0;
}

.container {
    width: 500px;
    height: 640px;
    border: 1px solid #000;
    margin: 0 auto;
}

.one {
    width: 200px;
    height: 200px;
    background-color: pink;
    float: left;
}

.two {
    width: 150px;
    height: 150px;
    background-color: gray;
    float: left;
}

.three {
    width: 250px;
    height: 250px;
    background-color: lightgreen;
    float: left;
}
</style>
<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

说明:

• 你会发现第三个div这个时候并没有向左靠紧第二个, 而是靠紧了第一个. 为啥呢?

• 第三个本来是要靠近第二个的, 但是很不幸, 父容器宽度不给力, 已经容不下他了, 他就自动往下滑, 就可以靠近第一个了.

看下面的动图:

说明:

• 虽说第一个div下面还有空间, 但是第三个并不会上去,因为浮动的元素只会努力向左或者向右浮动而不会向上浮动. 就是这样的 so easy.

2.3 右浮动

右浮动和左浮动的原理一样, 只是右浮动是努力的向右浮动而已.