CSS 浮动float
目录
CSS 浮动
CSS 清除浮动
CSS 浮动
CSS浮动：float属性用于创建浮动框，将其移动到一边，直到左边或右边触及包含快或另一个浮动框的边缘。
语法：
float：none、left、right；
值和描述：
none：元素不浮动（默认值）
left：元素向左浮动
right：元素向右浮动
浮动特性：
1. 浮动元素会脱离标准流（脱流）
浮动的盒子不在保留原先的位置
2. 如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列
3. 浮动元素会具有行内块元素特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
3.1 如果块级盒子没有设置宽度，默认宽度和父级一样，但是添加浮动后，它的大小根据内容来决定
3.2 浮动的盒子中间没有间隙，是紧挨着一起的
3.3 行内块元素同理
4. 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
浮动元素经常和标准流父级搭配使用。
为了约束浮动元素的位置，我们网页布局一般采用的策略是：先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置，符合网页布局第一准则。
为什么需要浮动：
有很多的布局效果，标准流没有办法完成，因此需要利用浮动来完成布局。
因为浮动可以改变元素标签默认的排列方式。
问题：
1. 如何让多个块级盒子水平排放到一行（div）
方案：使用行内块元素可以实现一行显示，但是他们之间有空白的间隙，很难控制
2. 如何实现两个盒子左右对齐
浮动最典型应用：可以让多个块级元素在一行内排列
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
CSS 清除浮动
为什么清除浮动：
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动有不占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子。
1. 父级没有高度
2. 子盒子浮动了
3. 影响下面的布局了，要清除浮动。
想法：
我们前面的浮动父类元素会有一个高度；但是我们的父类元素并不是都要有一个高度，理性中，我们应该是用子盒子撑起父盒子。给子盒子添加浮动，则父盒子的高度没了。
清除浮动
由于浮动元素不在占用元文档流的位置，所以他会对后面的元素排版产生影响。
清除浮动的本质：
1. 就是清除浮动元素造成的影响
2. 如果父盒子本身有高度，则不需要清除浮动
3. 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
语法：
选择器 {
clear：属性值；
}
left：不允许左侧有浮动元素（清除左侧浮动元素的影响）
fight：不允许右侧有浮动元素（清除右侧浮动元素的影响）
both：同时清除左右两侧浮动的影响
在实际开发中，几乎只用clear：both；
清除浮动的策略：
闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其它盒子。
清除浮动的方法：
1. 额外标签法也称为隔墙法，是W3C推荐的做法
2. 父级添加overflow属性
3. 父级添加after伪元素
4. 父级添加双伪元素
额外标签法：
额外标签法会在浮动元素末尾添加一个空标签。空元素必须是快元素
例如：<div style="clear:both"></div>
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构较差
父级添加overflow属性：
可以给父级添加overflow属性，将其属性值设置为hidden、auto、scroll。一般为hidden
优点：代码简洁
缺点：无法显示溢出的部分
父级添加after伪元素：
：after方式是额外标签法的升级版。也是给父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6\7 专有 */
*zoom: 1;
}
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
百度、淘宝等使用
父级添加双伪元素：
也是给父元素添加。
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
优点：代码更简洁
缺点：照顾低浏览器版本
应用：小米、腾讯使用。
