浮动
一.脱标的三种方式
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
- （1）浮动
- （2）绝对定位
- （3）固定定位
二.浮动
1.设置浮动
浮动是css里面布局最多的一个属性，也是很重要的一个属性。
float：表示浮动的意思。它有四个值。
- none: 表示不浮动，默认
- left: 表示左浮动
- right：表示右浮动
浮动的四大特性：
1.浮动的元素脱标
所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高
2.浮动的元素互相贴靠
如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠
3.浮动的元素有"字围"效果
所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。
4.收缩的效果
收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
2.清除浮动
为什么要清除浮动？
在开发中，为了提高开发效率，更好修改页面布局，在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。
看一个效果：
html效果：
<div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div>
css样式：
*{ padding: 0; margin: 0; } .father{ width: 1126px; /*子元素浮动 父盒子一般不设置高度*/ /*出现这种问题，我们要清除浮动带来影响*/ /*height: 300px;*/ } .box1{ width: 200px; height: 500px; float: left; background-color: red; } .box2{ width: 300px; height: 200px; float: left; background-color: green; } .box3{ width: 400px; float: left; height: 100px; background-color: blue; } .father2{ width: 1126px; height: 600px; background-color: purple; }
效果发现：如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。
浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动
清除浮动的四种方法：
1.给父盒子设置高度
使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏
2.clear:both 内墙法 清除别人对我的浮动影响
有三个值：
left：当前元素左边不允许有浮动元素
right：当前元素右边不允许有浮动元素
both：当前元素左右两边不允许有浮动元素
给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。
3.伪元素清除法（常用）
给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
.clearfix:after{ /*必须要写这三句话*/ content: '.'; clear: both; display: block; }
新浪首页推荐伪元素清除法的写法
/*新浪首页清除浮动伪元素方法*/ content: "."; display: block; height: 0; clear: both; visibility: hidden/*隐藏可见性*/
4.overflow：hidden
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
有五个值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
逐渐演变成overflow：hidden清除法。
其实它是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522
