07 ­ 第七章：浮动

定义

使元素脱离文档流，按照指定方向（左右）发生移动，遇到父级边界或者相邻的浮动元素停了下来。

  div{
  float:left;
  }

文档流 ~

普通情况下可见元素在排列是所占用的位置 将元素自上而下分成一行行, 并在每行中按从左至右的顺序排放元素 就是我不给他添加任何样式的时候默认排列的样子！ 遵守最基本的元素
排列的规则 ，这就是文档流！

脱离文档流

层叠顺序：背景–Z­index负–block块盒子–float浮动盒子–inline,inline­block盒子–定位盒子（未设置
层级）–Z­index正(定位后面学 此处自动忽略不认识部分)

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.给父级inline­block 缺点是中间会解析空格
3.overflow:hidden; 需要溢出隐藏的时候你就写，这样就不用写清楚浮动的样了
4.after伪类（时下主流，别问了，以后统一用这个 划重点）

    .clearfix:after{content:'';display:block;clear:both;}

解决低版本ie的兼容性问题

    .clearfix{zoom：1；}

min­width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min­width
的值。
max­width 属性用来给元素设置最大宽度值.

• 浮动元素默认宽度和高度由内容撑开！

浮动的字围现象：

• 我们现在肉眼所看到的都是一个2D的现象，一个子元素在父元素里面左浮动之后，那么比如说有一个层的关系，第一层就是父元素，子元素左浮动之后，就会脱离标准流，字体没有被盖住的原因，是因为字体本身也在第二层，浮起来了，所以才没有被盖住，由于字体浮起来了，一个左浮动元素，左浮动之后会把文字挤向右边！

• 浮动之后没有流的概念了！

  
  image.png

2. 浮动属性会改变标签的display为block。

• 支持margin和padding具体的值！
• 不支持margin:auto;

3. 当子元素浮动之后，父级高度会坍塌，因为子元素脱离了标准流。