这是我参与「第四届青训营 」笔记创作活动的的第5天。 在此总结了了CSS浮动的相关知识，自己对于不会的和之前不完善的知识整理了如下。
五、CSS浮动
浮动最典型的应用：可以让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
1、基本语法
选择器 {
float:属性值;
}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
2、浮动特性（重难点）
2.1 浮动元素会脱离标准流
2.2 浮动的元素会一行显示并且元素顶部对齐
注意：浮动的元素是互相贴靠在一起的（不会右缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行的对齐。
2.3 浮动的元素具有行内块元素的特性
注意：如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
3、浮动布局注意点
3.1 浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
3.2 一个元素浮动了，理论上其余的兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会ying'x
4、清除浮动
4.1 为什么要清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
4.2 语法
选择器 { clear:属性值; }
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
我们实际工作中，几乎只用clear:both
5、清除浮动方法
闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
5.1 额外标签法（隔墙法，W3C推荐）
在浮动元素末尾添加一个空的标签
<div style="clear:both"></div>
或
<br/>
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素
5.2 overflow属性
给父级添加overflow属性，将其属性值设置为hidden/auto/scroll
overflow : hidden;
优点：代码简洁
缺点，无法显示溢出的部分
5.3 after属性
css中声明
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*IE6、7 专有*/
*zoom: 1;
}
html中给父元素添加该类
<div class="box"></div>
添加后
<div class="box clearfix"></div>
优点：没有添加标签，结构更简单
缺点：照顾低版本浏览器
5.4 双伪元素
也是给父元素添加
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
/*IE6、7 专有*/
*zoom: 1;
}
优点：代码更简洁
缺点：照顾低版本浏览器
\
