CSS float相关详解

float属性是CSS经常使用的一个属性，应用场景普遍，同时也是一个难点，涉及到一些相关细节及注意点。所以，就特别整理总结一下。

1、float介绍

float元素也称为浮动元素，设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离，但浮动元素影响的不只是本身，它会影响周围的元素对齐进行环绕。简单来讲，就是让block元素无视float元素，让inline元素让流水同样围绕着float元素来实现浮动布局。 文字环绕图片是float典型的应用场景，以下所示：

html代码

<img class="float" src="image1.jpg">
<p class="around">Harry Potter is a series of fantasy novels written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry. </p>
复制代码

css代码

.float{
	float:left;
	margin: 10px;
	width: 100px;
	height: 100px;
}
.around {
	background: #00ff90;
	width:300px;
	padding: 10px;
}
复制代码

由上图能够看出，img元素设置了float：left以后会脱离文档流而居于左侧存在。而p元素无视img元素的存在，从窗口的左上角开始流入，可是p元素中的文字意识到img元素的存在而环绕图片流入。而且img元素是漂浮在p元素的上层。

2、float元素特性

1.块级框

无论一个元素是行内元素仍是块级元素，若是被设置了浮动，那浮动元素会生成一个块级框，能够设置它的width和height，所以float经常用于制做横向配列的菜单，能够设置大小而且横向排列。

首先看一个块级元素的例子。

html代码

<div class="div1">
		<img src="image1.jpg">
	</div>
	<div class="div2">
		<img src="image2.jpg">
	</div>
复制代码

css代码

.div1{
	padding: 10px;
	border: 3px solid black;
}
.div2 {
	float: left;
	padding:10px;
	border: 3px solid red;
}
复制代码

默认状况下，div元素的宽是100%，一旦让该div浮动起来，马上会像inline元素同样产生包裹性，宽度会跟随内容自适应。

再来看下行内元素的例子：

html代码

<div class="box">
        <span class="rule1">
            首页
        </span>
        <span class="rule1">
            发现
        </span>
        <span class="rule1">
            动态
        </span>
        <span class="rule1">
            个人
        </span>
    </div>
复制代码

css代码

.box { 
	background: #d32d2d; 
	padding: 10px; 
	width: 500px; 
	height: 400px; 
}
.rule1 { 
	float: left; 
	margin: 10px; 
	padding: 10px; 
	background: #eee; 
	width: 100px; 
	text-align: center; 
}
复制代码

由上图发现，当span设置float属性后，能够指定width，height值。 同时能够发现，当多个元素指定为float且同时为left/right时，元素是紧挨着排列，行内宽度不够时再换行排列。

2.高度崩塌

html代码

<div class="div1">
		<img src="image1.jpg">
	</div>
	<div class="div2">
		<img src="image2.jpg">
	</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中认为没有元素，因此产生了高度崩塌。具体怎么解决高度崩塌，后面再介绍。

3、clear属性

clear属性的做用是清除浮动。

clear : none | left | right | both

   取值：

   none  :  默认值。容许两边均可以有浮动对象

   left   :  不容许左边有浮动对象

   right  :  不容许右边有浮动对象

   both  :  不容许有浮动对象
复制代码

html代码

<div class="div1">
	</div>
	<div class="div2">
	</div>
复制代码

css代码

.div1{
	float: left;
	width: 300px;
	height: 150px;
	padding: 10px;
	border: 3px solid black;
	background-image: url("image1.jpg")
}
.div2 {

	border: 3px solid red;
	padding:10px;
	width:500px;
	height:200px;
	background-image: url("image2.jpg")
}
复制代码

如上图所示，因为div1是浮动元素，因此div2在div1底层铺展。 若是想要让div2换行排列，居于div1底端下方，这个时候就要用到clear属性了。

css代码

.div1{
	float: left;
	width: 300px;
	height: 150px;
	padding: 10px;
	border: 3px solid black;
	background-image: url("image1.jpg")
}
.div2 {
    clear: left;
	border: 3px solid red;
	padding:10px;
	width:500px;
	height:200px;
	background-image: url("image2.jpg")
}
复制代码

只须要在div2中加入clear: left。

对于CSS的清除浮动(clear)，必定要牢记：这个规则只能影响使用清除的元素自己，不能影响其余元素。

以上图为例子说明，div1和div2都设置了float：left。若是在div1的CSS样式中添加clear:right，来迫使div2下移，则没有任何效果。由于这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。 要想让div2下移，就必须在div2的CSS样式中使用浮动。div2的左边有浮动元素div1，所以只要在div2的CSS样式中使用clear:left;来指定div2元素左边不容许出现浮动元素，这样div2就被迫下移一行。

4、BFC

为何要介绍BFC，是由于它和float有着密切的关系。

1.BFC的介绍

定义

一些元素，如float元素，如position为absolute,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会发生重叠
• 每一个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
• 计算BFC的高度时，浮动元素也参与计算

有些规则可能不太理解，看完下面的内容就会理解。

2.BFC做用

消除Margin Collapse

在正常状况下，在一个容器内的全部box将会由上至下依次垂直排列，即咱们所说的一个元素占一行，并切垂直相邻的距离(即margin)是由各自的margin决定的，而不是两个margin的叠加。

让咱们看一个例子：

html代码:

<div class="container">
  <p>条目 1</p>
  <p>条目 2</p>
  <p>条目 3</p>
</div>
复制代码

css代码:

.container {
	width: 300px;
  background-color: black;
  overflow: hidden;
}

p {
  background-color: white;
  margin: 10px 0;
  text-align: center;
}
复制代码

理想状况下，咱们会认为p标签之间的margin应该是它们的和(20px),但实际上倒是10px.这实际上是collapsing margins(外边距坍塌)。其中flex布局不存在collapsing margins，水平方向上也不存在collapsing margins。

利用BFC能消除collapsing margins。紧记只有当元素在同一个BFC中时，垂直方向上的margin才会clollpase。若是它们属于不一样的BFC，则不会有margin collapse。所以咱们能够再创建一个BFC去阻止margin collpase的发生。 因此为了让他们的margins变成20，咱们只须要用div,创建一个BFC,令p元素处于不一样BFC便可。

html代码

<div class="container">
  <p>条目 1</p>
  <p>条目 2</p>
  <div class="newBFC">
  	  <p>条目 3</p>
  </div>
</div>
复制代码

css代码

.container {
	width: 300px;
  background-color: black;
  overflow: hidden;
}

p {
  background-color: white;
  margin: 10px 0;
  text-align: center;
}
.newBFC {
  overflow: hidden;
}
复制代码

容纳浮动元素

就是解决上面遇到的高度崩塌问题。

只须要将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="image1.jpg">
    </div>
    <div class="div2">
        <img src="image2.jpg">
        <div style="clear: both"></div>
    </div>
复制代码

增长一个div元素，由于是清除元素，会在img元素底部显示，所以会撑起div2高度。

阻止文本换行

大多数状况(若没有特殊设置)，如Figure1,文本将会环绕浮动元素,但有时候这并非咱们指望的。咱们期待的是Figure2如图:

想要达到图2的效果，只须要将右部的文字区变成一个BFC便可，以下图所示。

5、总结

以上就是float有关的内容，内容涉及比较多，这也反映出float的重要性，关于float的应用场景很是多。