从流式布局到flex布局，css中的各种布局模式为开发提供了诸多便利，这篇文章是对浮动布局相关内容的总结。

何为浮动布局

在写前端页面时，常常会遇到多个div需要并排显示的情况，可能是购物网站相邻的商品模块，亦或者是电影资讯网站的新闻信息，浮动（float）就是让块级元素并排显示的一种有效的解决方案。

但是有趣的是，浮动在创造之初，其设计本意并不是实现块级元素并列。它是为了字围效果而诞生的，类似于我们在基础电脑课学word时必学的文本环绕图片效果。浮动阴差阳错地成为了我们极为常用地布局模式，可谓造化弄人（笑）。

基本浮动效果

首先看一个最基本的浮动案列

.a{
    width: 240px;
    height: 240px;
    background-image: url("../img/1.jpeg")
}
.b{
    width: 240px;
    height: 240px;
    background-image: url("../img/2.jpeg")
}

由于div为块级元素，所以它们垂直一列显示。

给a加入float：

    float:left;

看看效果：

？？小b怎么消失了？？

浮动解释

我们把两个div的父元素看作是一个国家，两个div都是这个国家的公民，当为小a设置了浮动之后，就相当与小a出国旅行了，我们称之为脱离标准文档流（但浮动并未完全脱离标准文档流），因为小a已经不再本国疆域之内，于是乎还在国内的小b会前移，顶上去，与小a的位置重叠，所以我们就看不见小b了。

为某一元素设置浮动后，它先向上移动，直到贴靠到父元素的边界，如果是左浮动，就再向左移动直到父元素的左边界；如果是向右浮动，就再向右移动直到父元素的右边界，后面的其他元素会排上来。

高度塌陷

浮动虽然用起来很happy，但是会产生一个很严重的问题————父元素高度塌陷。

父元素高度塌陷会发生在没有设置高度且子元素全部浮动的父元素里。

还是刚才的小a和小b，我们给他们两个都设置一下浮动：

    .a{
    width: 240px;
    height: 240px;
    background-image: url("../img/1.jpeg")
    float:left;
}
.b{
    width: 240px;
    height: 240px;
    background-image: url("../img/2.jpeg");
    float:left;
}

效果如下：

父元素的高度没有了！！！

解决办法

高度塌陷的成因很好理解，小a和小b都出国了，父元素中空无一人，由于没有设置高度，其高度默认自适应，所以变为0。高度塌陷会为开发带来诸多不便，有以下办法可以解决此问题：

为父元素设置高度
为父元素设置overflow:hidden
父元素浮动，也不会产生塌陷
在子元素后面加一个空的div，并未这个空div设置clear:both

最后一种方法可以用伪类实现，简单高效又优雅，即提前写好伪类

.clear:after{
    content=""; 
    display:block; 
    clear:both; 
    height:0; 
    overflow:hidden;
}

需要时随时调用即可。

浮动的其他细节

变性手术？？

如果对一个行内元素设置浮动，该行内元素会自动变为块级元素。

引入新的小c

<span class="c">
</span>

.c{
    width: 480px;
    height: 480px;
    background-image: url("../img/03.jpeg");
    float: left;
}

成功变身块级元素！！

浮动产生的包裹性

一个浮动的块级元素，若其未设置宽度，它的宽度会尽可能小，小到正好完美包裹住内容。

洋装虽然穿在身，我心依然是中国心

前面提到过，浮动并未完全脱离标准文档流，如同出国旅游但并未改变国籍的公民一样，浮动的元素依然受父元素控制。

父元素宽度改变会对浮动元素产生影响，当减少父元素宽度时，浮动的子元素会往一边“挤”，浮动的子元素宽度不变。

总结

本文对浮动进行了简要的总结，也是本人学习过程的心得，希望对读者有所帮助。

浮动布局知多少