07 第七章：浮动
定义
使元素脱离文档流，按照指定方向（左右）发生移动，遇到父级边界或者相邻的浮动元素停了下来。
div{
float:left;
}
文档流 ~
普通情况下可见元素在排列是所占用的位置 将元素自上而下分成一行行, 并在每行中按从左至右的顺序排放元素 就是我不给他添加任何样式的时候默认排列的样子！ 遵守最基本的元素
排列的规则 ，这就是文档流！
脱离文档流
层叠顺序：背景–Zindex负–block块盒子–float浮动盒子–inline,inlineblock盒子–定位盒子（未设置
层级）–Zindex正(定位后面学 此处自动忽略不认识部分)
image.png
1.浮动的一般情况
注意：左浮动和右浮动的顺序的变化
.浮动中将会遇到的问题
第一种情况 导致的各种布局混乱问题
（浮动元素不占位置导致的布局变化）
第二种情况 浮动的元素只影响他后面的元素
根据层叠顺序推算
第三种情况 导致的各种掉盒子问题
如果父级宽度太窄，无法容纳所有元素，无法容纳的元素会掉下去，之后还是会执行浮动，向左或
者向右知道遇到边框就会停下来！
第四种情况 导致的各种被卡住问题
浮动的元素高度不同，并且外面盒子宽度不够的情况下，往下掉的过程中可能会被卡住
浮动对文字的影响：环绕
3.float元素的特性
设置了浮动的元素，变成浮动元素，具备浮动元素特性
都支持横排显示
都支持宽高
不给宽度的时候默认内容撑开宽高
支持margin padding
不支持margin:auto;
浮动脱离文档流
浮动提升层级半级 概念性理解，其实和层级没关系，只有定位有层级
清除浮动
为什么要清除浮动呢？
浮动元素不占位置，由于不占位置导致父级的塌陷影响布局 （内容为0高度，父级高度由内容撑开的时候，也为 0）
清除浮动的原则： （清除浮动乃是清除浮动给父级带来的影响）
1.浮动元素本身不能清除浮动 比如div 设置了float 不能直接给div 运用clear来清除浮动
2.哪里浮动，哪里给父元素清除！ 这里意思是，浮动之后要立马解决这里由于浮动带来的影响！
以免对后面的布局造成影响！而清除浮动的方法在下面讲到。
清除浮动的方式
clear:both;
子元素方式：最后添加空标签
/*缺点：在ulli要注意 因为不能嵌套块级 并且浮动元素本身不能清除 浮动*/
<div style='clear:both;'></div>
给父级用的方法
1.给父元素添加高度 缺点是扩展性不好，一般都是内容撑开高度
2.给父级inlineblock 缺点是中间会解析空格
3.overflow:hidden; 需要溢出隐藏的时候你就写，这样就不用写清楚浮动的样了
4.after伪类（时下主流，别问了，以后统一用这个 划重点）
.clearfix:after{content:'';display:block;clear:both;}
解决低版本ie的兼容性问题
.clearfix{zoom：1；}
minwidth 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 minwidth
的值。
maxwidth 属性用来给元素设置最大宽度值.
- 浮动元素默认宽度和高度由内容撑开！
浮动的字围现象：
-
我们现在肉眼所看到的都是一个2D的现象，一个子元素在父元素里面左浮动之后，那么比如说有一个层的关系，第一层就是父元素，子元素左浮动之后，就会脱离标准流，字体没有被盖住的原因，是因为字体本身也在第二层，浮起来了，所以才没有被盖住，由于字体浮起来了，一个左浮动元素，左浮动之后会把文字挤向右边！
-
浮动之后没有流的概念了！
image.png
- 浮动属性会改变标签的display为block。
- 支持margin和padding具体的值！
- 不支持margin:auto;
- 当子元素浮动之后，父级高度会坍塌，因为子元素脱离了标准流。
