浮动float定位

引子—标准流（normal flow）

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

分为两种等级：块级元素和行内元素；

块级元素：
1).霸占一行，不能与其他任何元素并列
2).能接受宽、高
3).如果不设置宽度，那么宽度将默认变为父元素的100%，即和父元素一样宽

行内元素：
1).与其他元素并排
2).不能设置宽、高。默认的宽度就是文字的宽度

在HTML中，标签分为：文本级和容器级；
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

提示：
(1).容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。
(2).p标签是一个文本级标签。p里面只能放文字、图片、表单元素。其他的一律不能放。
(3).定义列表是一个组标签，不过比较复杂，出现了三个标签：dl表示definition list 定义列；dt表示definition title 定义标题；dd表示definition description 定义表述词儿；dt、dd只能在dl里面；dl里面只能有dt、dd


显然标准流已经无法满足全部的需求，这就要用到浮动。
浮动可以理解为让某个div元素脱离标准流（没有完全脱离文档流），漂浮在标准流之上，和标准流不是一个层次。

float简介

• float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它，也就是说其周围元素也会重新排列。
• 该元素从网页的正常流动(文档流)中移除，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素（与绝对定位相反）。

float: none;

float: left;

特性

• 块状化
• 包裹性
• 自适应性
• 父元素高度塌陷
• 没有任何的margin重叠
• 浮动元素只影响后面的标准流

1.块状化
一旦元素（不管是inline还是block）被设为float，其display就为block，但是其并不完成继承block元素的属性（其实像inline-block），比如该元素并不独占一行，只是可以像block元素一样设置宽高，并不是真正的块元素。因此float常常用于制作横向配列的菜单，可以设置大小且横向排列。

需要补充的一点是如果多个盒子都设置了浮动属性，它们会按照属性值一行内显示并顶端对齐排列

var span = document.createElement('span')
document.body.appendChild(span)
console.log('1.' + window.getComputedStyle(span).display)
// 设置元素左浮动
span.style.cssFloat = 'left'
console.log('2.' + window.getComputedStyle(span).display)

//输出：
1.inline
2.block

浮动元素设置display是多余的

span{
    display: block; /* 多余 */
    float: left;
}
span{
    float: left;
    vertical-align: middle; /* 多余 */
}

2.包裹性（float父元素会包裹块级子元素）
默认情况下，div元素的宽是100%（block的特性），一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。也就是说设置了float的父元素会“包裹”子元素。

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

<div class="div1">
	<img src="image1.jpg">
</div>

<div class="div2">
	<img src="image2.jpg">
</div>

3.自适应性
当span等inline元素设置float属性后，可以指定width，height值。 同时可以发现，当多个元素指定为float且同时为left/right时，元素是紧挨着排列，行内宽度不够时再换行排列。

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

	<div class="box">
        <span class="rule1">
            首页
        </span>
        <span class="rule1">
            发现
        </span>
        <span class="rule1">
            动态
        </span>
        <span class="rule1">
            我的
        </span>
    </div>

4.父元素高度塌陷（父元素内全为float子元素）

将float属性设置给div2内部的绿色div子元素，可以看出div2的高度并没有div子元素被撑起来，因此又叫高度崩塌。 因为将绿色div元素设置为浮动元素，所以脱离文档流。因而div2中认为没有元素，所以产生了高度崩塌。

.div1{
	border: 3px solid black;
}
.div1 div{
	width: 100px;
	height: 100px;
}
.div2 {
	border: 3px solid red;
}
.div2 div {
	float: left;
	padding:10px;
	width: 100px;
	height: 100px;
}

<div class="div1">
        <div style="background-color: yellow"></div>
    </div>
    <div class="div2">
        <div style="background-color: green"></div>
    </div>

• 如果一个父元素内只包含浮动元素，那么如何让父元素包裹子元素呢？——解决父元素高度塌陷

为父元素设置 overflow:hidden

.div2 {
	border: 3px solid red;
	overflow：hidden;
}
.div2 div {
	float: left;
	padding:10px;
	width: 100px;
	height: 100px;
}

BFC内部元素不能影响外部，因此浮动子元素不可显示在父元素之外。设置作为一个BFC父元素可以包裹float的子元素（利用了BFC的性质）。

5.没有任何margin重叠

查看相邻的.son元素的空白区域的高度是20px，可以发现设置了float属性的元素没有任何的margin重叠，这和普通的元素margin重叠不一样。

.son{
	margin:10px;
}

<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
</div>

6. 浮动元素只影响该元素后面的标准流

浮动元素只会影响浮动元素后面的标准流而不会影响前面的标准流。

.aa{
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
    }
    .bb{
        width: 150px;
        height: 150px;
        background-color: yellow;
    }
    .cc{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }

<div class="aa">浮动元素</div>
<div class="bb">标准流</div>
<div class="cc">浮动元素</div>

清除浮动

为什么要清除浮动？
父级元素在很多情况下不方便写死高度，但是该父级元素所包含的都为浮动子元素时，父元素的高度为0，就会影响后面标准流的定位。

**1. clear属性**

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

如果单从字面上的意思来理解，clear:left应该是"清除左浮动"，clear:right应该是"清除右浮动"，实际上，这种说法是有问题的，因为浮动一直还在，并没有清除！只能清除浮动带来的影响。官方对clear属性的解释是：“元素盒子的边不能和前面的浮动元素相邻”。注意这里的"前面的"3个字，也就是clear属性对"后面的"浮动元素是不闻不问的。clear属性只能清除元素的自身，不能影响其他的元素。

  clear : none | left | right | both

   取值：

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

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

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

   both  :  不允许有浮动对象

由于div1是浮动元素，所以div2在div1底层铺展（也就是说image1会叠在image2上面）。 如果想要让div2换行排列，居于div1底端下方，这个时候就要用到clear属性了。

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素，比如不能使其他元素下移。比如clear:both作用的本质是让自己不和float元素在一行显示。

.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")
}

<div class="div1">
</div>

<div class="div2">
</div>

2. 设置 overflow:hidden开启一个 BFC

<div style="border:1px solid #000;width:300px;">
  <div style="float:left;background: yellow;height:100px;width:150px;">float:left</div> 
  <div> Eros. Nunc ac tellus in sapien molestie rhoncus. Pellentesque nisl. Praesent venenatis blandit velit. Fusce rutrum.  Leo diam interdum ligula, eu scelerisque sem purus in tellus.</div>
</div>

左侧< div >设置了浮动属性，右侧< div >会环绕左侧的浮动元素。

此时，我们为右侧< div >设置overflow:hidden。这样右侧就会形成一个BFC（块级格式化上下文）其内部布局不受外部浮动的影响，因此也就不会环绕左侧< div >了。