浮动流
浮动流脱标
1.什么是浮动元素的脱标？
脱标：脱离标准流
当某一个元素脱标以后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标
2.浮动元素脱标之后会有什么影响？
如果前面一个元素浮动了，而后面一个元素没有浮动，
那么这个时候前面的一个元素就会盖住后面的一个元素
浮动元素排序规则
1.浮动元素排序规则
1.1相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面
1.2不同方向上的浮动元素，左浮动就会找左浮动，右浮动会找右浮动
1.3浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定
浮动元素的贴靠现象
1.如果父元素的宽度足够显示所有浮动元素，
那么浮动的元素就会并排显示
2.如果父元素的宽度不能显示所有浮动元素，
那么会从最后一个元素开始往前贴靠
3.如果贴靠了前面所有浮动元素之后都不能显示，
最终会贴靠到父元素的左边或者右边
浮动元素高度问题及清除浮动方式
1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中，浮动的元素是不可以撑起父元素的高度的
1.清除浮动的方式一
给前面一个父级元素设置高度
注意点：
在企业开发中，我们能不写高度就不写高度，
所以这种方式用的很少
2.清除浮动元素方式二
给后面的盒子添加clear属性
clear属性取值：
none：默认取值，按照浮动元素的排序规则来排序
left：就是告诉浏览器当前的浮动元素不要找前面的左浮动元素
right：不要找前面的右浮动元素
both：不要找前面的左浮动元素和右浮动元素(企业开发中一般都使用这个属性)
注意点：
当我们给某个元素添加clear属性之后，那么这个属性的margin属性就会失效
3.清除浮动元素方式三（隔墙法）
3.1外墙法
在两个盒子中间添加一个额外的块级元素
给这个额外添加的块级元素设置clear：both;属性
注意点:
外墙法可以让第二个盒子使用margin-top属性
但是第一个盒子无法使用margin-bottom属性
3.2内墙法
在第一个盒子中所有子元素最后添加一个额外的块级元素
给这个额外添加的块级元素设置clear：both;属性
注意点：
内墙法可以让第二个盒子使用margin-top属性
而且第一个盒子也可以使用margin-bottom属性
3.3两者之间的区别
外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度
在企业开发中基本不使用这个隔墙法方式来清除浮动元素
4.清除浮动的方式四（伪元素选择器法）
通过伪元素选择器为第一个盒子添加子元素，这样就和内墙法的原理相同，企业开发一般使用这个方法
.box1::after{
/*设置添加的子元素内容为空*/
content: '';
/*设置添加的子元素为块级元素*/
display: block;
/*设置添加的子元素的高度为0px*/
height: 0;
/*设置添加的子元素看不见*/
visibility: hidden;
/*给添加的子元素设置clear：both；*/
clear: both;
}
.box1{
/*兼容ie6浏览器*/
*zoom: 1;
}
注意点：
IE6中不支持这种方式，为了兼容IE6必须给前面盒子添加*zoom：1;属性
什么是伪元素选择器？
伪元素选择器作用就是给指定标签的内容前面添加一个子元素
或者给指定标签的内容后面添加一个子元素
格式:
div::before{
属性: 值;
}
给指定标签前面添加子元素
div::after{
属性: 值;
}
给指定标签后面添加子元素
例如:
content:"么么哒"; == 指定添加的子元素中存储的内容
visibility:hidden; == 隐藏添加的子元素
5.清除浮动的方式五
1.overflow：hidden;作用
1.1可以将超出标签范围的内容裁剪掉
1.2清除浮动,给第一个盒子添加overflow：hidden;属性即可
注意点：IE6中不支持这种方式，为了兼容IE6必须给前面盒子添加*zoom：1;属性
1.3可以通过overflow：hidden;属性让里面的盒子设置margin-top之后，外面的盒子不被顶下来