今天小编跟大家讲解下有关CSS float相关介绍 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS float相关介绍 的相关资料，希望小伙伴们看了有所帮助。
一、float介绍
float元素也称为浮动元素，设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。简单来说，就是让block元素无视float元素，让inline元素让流水一样围绕着float元素来实现浮动布局。 文字环绕图片是float典型的应用场景，如下所示：
html代码
<img class="float"src="http://www.aidi.net.cn/article/detial/5880/image/HC5450_15-IMS-zh_CN.jpg"/><p class="around">华夏之大，有造物之工师，兼创器之良匠，留下传世之美。有些器物，不仅仅需要玻璃罩的保护，更需要心手合一的把玩。摩挲盘桓，实为栖心之境。古而近雅，追求老器物绝不是一味的泥古，而是追求内心的安定，古物经历过时间，消除了火气，更显得雍穆沉静。不入古境，不解其情，若入古境，自得况味，这便是时间的艺术。</p>css代码
.float{ float:left; width:100px; height: auto; margin: 10px;}.around{ width:300px; color:#fff; background: #009F95; padding: 10px;}由上图可以看出，img元素设置了float：left之后会脱离文档流而居于左侧存在。而p元素无视img元素的存在，从窗口的左上角开始流入，但是p元素中的文字意识到img元素的存在而环绕图片流入。并且img元素是漂浮在p元素的上层。
二、float元素特性
1.块级框
不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。
（1）先来看一个块级元素的例子：
html代码
<div class="div1"> <img src="http://www.aidi.net.cn/article/detial/5880/image/pic1.png"/></div><div class="div2"> <img src="http://www.aidi.net.cn/article/detial/5880/image/pic2.png"/></div>css代码
.div1{ padding: 10px; border: 3px solid black;}.div2 { float: left; padding:10px; border: 3px solid red;}默认情况下，div元素的宽是100%，一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。
（2）接着看下行内元素的例子：
html代码
<div class="box"> <span class="menu">首页</span> <span class="menu">消息</span> <span class="menu">朋友</span> <span class="menu">我的</span></div>css代码
.box{ width: 500px; background: pink; height: 200px;}.menu{ width: 100px; float: left; margin: 10px; padding: 10px; background: #eee; text-align: center; }由上图可见，当span设置float属性后，可以指定width，height值。 同时可以发现，当多个元素指定为float且同时为left/right时，元素是紧挨着排列，行内宽度不够时再换行排列。
2.高度崩塌
html代码
<div class="div1"> <img src="http://www.aidi.net.cn/article/detial/5880/image/pic1.png"/></div><div class="div2"> <img src="http://www.aidi.net.cn/article/detial/5880/image/pic2.png"/></div>css代码
.div1{ padding: 10px; border: 3px solid black;}.div2 { border: 3px solid red;}.div2 img{ float: left; padding:10px;}将float属性设置给div2内部的img元素，可以看出div2的高度并没有img元素被撑起来，因此又叫高度崩塌。
原因：将img元素设置为浮动元素，所以脱离文档流。因此div2中认为没有元素，所以产生了高度崩塌。具体怎么解决高度崩塌，后面再介绍。
三、clear属性
clear属性的作用是清除浮动。
clear : none | left | right | both； none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象html代码
<div class="bg1"></div><div class="bg2"></div>css代码
.bg1{ width:200px; height: 200px; border: 3px solid black; background: url(image/pic2.png); float: left;}.bg2{ width:500px; height: 300px; border: 3px solid red; background: url(image/pic1.png);}如上图所示，由于bg1是浮动元素，所以bg2在bg1底层铺展。
如果想要让bg2换行排列，居于bg1底端下方(如下图)，这个时候就要用到clear属性了。
css代码中，只需要在bg2中加入 clear:left 即可
.bg1{ width:200px; height: 200px; border: 3px solid black; background: url(image/pic2.png); float: left;}.bg2{ width:500px; height: 300px; border: 3px solid red; background: url(image/pic1.png); clear: left;}对于css的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
以上图例子说明。bg1和bg2都设置了float:left。如果在bg1样式中添加样式clear:right,来迫使bg2下移，则没有任何效果。因为这个清除浮动是在bg1中调用的，她只能影响bg1,不能影响到bg2。
要想要bg2下移，就必须在bg2的样式中使用浮动 clear:left。用来指定bg2元素左边不允许出现浮动元素。
四、BFC
1.BFC的介绍
定义：
一些元素，如float元素，如position为absolute,block为inline-block,table-cell或table-caption的元素，以及overflow属性不为visible的元素，它们将会建立一个新的块级格式化上下文(Block Formatting Context),也就是我们所说的BFC。
形成
BFC也是html中的一个盒子（看不见而已），只有满足至少下列条件之一才能形成BFC:
① float属性不为none.
② position属性不为static和relative.
③ display属性为下列之一:table-cell,table-caption,inline-block, flex,inline-flex.
④ overflow属性不为visible.
布局规则
① 内部的Box会在垂直方向，一个接一个地放置。
② Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
③ BFC的区域不会与float box重叠。
④ BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
⑤ 计算BFC的高度时，浮动元素也参与计算。
2、BFC的作用
（1）容纳浮动元素
就是解决上面遇到的高度崩塌问题。
只需要将div2的css代码改动一下，增加一个BFC来容纳浮动元素。
.div1{ padding: 10px; border: 3px solid black;}.div2 { overflow:hidden; border: 3px solid red;}.div2 img{ float: left; padding:10px;}除此之外，解决高度崩塌问题，还有如下解决方法：
增加一个清除浮动的子元素
html代码
<div class="div1"> <img src="http://www.aidi.net.cn/article/detial/5880/image/pic1.png"/></div><div class="div2"> <img src="http://www.aidi.net.cn/article/detial/5880/image/pic2.png"/> <div style="clear:both"></div></div>（2）阻止文本换行
大多数情况(若没有特殊设置)，如Figure1,文本将会环绕浮动元素,但有时候这并不是我们期望的。我们期待的是Figure2如图:
想达到图二的效果，只需要将右边文字区域变成一个BFC即可。
css代码如下：
.float{ float:left; width:100px; height: auto; margin: 10px;}.around{ width:300px; color:#fff; background: #009F95; padding: 10px; overflow: hidden;}（3）消除Margin Collapse (外边距坍塌)
在正常情况下，在一个容器内的所有box将会由上至下依次垂直排列，即我们所说的一个元素占一行，并切垂直相邻的距离(即margin)是由各自的margin决定的，而不是两个margin的叠加。
让我们看一个例子：
html代码：
<div class="container"> <p>list 1</p> <p>list 2</p> <p>list 3</p></div>css代码：
.container { width: 300px; background-color: black; overflow: hidden;}p { background-color: white; margin: 20px 0; text-align: center;}理想情况下，我们会认为p标签之间的margin应该是它们的和(20px*2=40px),但实际上却是20px.这其实是collapsing margins(外边距坍塌)。其中flex布局不存在collapsing margins，水平方向上也不存在collapsing margins。
利用BFC能消除collapsing margins。紧记只有当元素在同一个BFC中时，垂直方向上的margin才会clollpase。如果它们属于不同的BFC，则不会有margin collapse。因此我们可以再建立一个BFC去阻止margin collpase的发生。
所以为了让他们的margins变成40px，我们只需要用div,建立一个BFC,令p元素处于不同BFC即可。
html代码：
<div class="container"> <p>list 1</p> <p>list 2</p> <div class="newBFC"><p>list 3</p> </div></div>css代码：
.container { width: 300px; background-color: black; overflow: hidden;}p { background-color: white; margin: 20px 0; text-align: center;}.newBFC { overflow: hidden;}来源：爱蒂网
