浮动布局知多少

从流式布局到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;
}
复制代码

成功变身块级元素！！

浮动产生的包裹性

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

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

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

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

总结

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