理解CSS的浮动

1.正常文档流（默认元素的布局方式）

• 将一个页面从上到下分为一行一行，其中块元素独占一行，相邻的行内元素在每一行按照从左到右排列直到该行排满

2.脱离文档流(特殊元素的布局方式)

• 产生条件：浮动（float）和 定位（position）

3.浮动的特点

• 元素被设置浮动以后，元素的宽度不再延申，而是由内容宽度决定其宽度
• 元素被设置浮动以后，不管元素之前是inline/inline-block，还是其他类型，都会变成block类型
• 元素被设置浮动以后，元素脱离文档流
  • 若后面的元素为块元素（没设置浮动、没设置position），该块元素会跑到设置浮动元素的下面被其遮挡，但是该块元素里面的行内元素（img）或者文本会跑到浮动元素下面
  • 
  • 若后面的元素为行内元素，行内元素（img）或者里边的文本会环绕浮动元素
  •  

4.浮动造成的问题

• 对自身的影响：不管什么元素类型，被设置了浮动后，全都变成block类型
• 对父元素的影响：如果浮动元素的hight大于父元素的height，或者父元素没有定义高度height，此时浮动元素会脱离父元素，这就造成了‘父元素高度塌陷’

父元素高度塌陷

父元素的高度小于子元素的高度或者父元素没有定义高度，父元素不能包裹住子元素就会造成‘高度塌陷’说白了就是“老爸管不住儿子了，因此儿子脱离了约束，离家出走，不在父亲的管控范围之内了”

• 对兄弟元素的影响：
  • 兄弟元素也是浮动时：成横向排列，紧挨一起
  • 兄弟元素不是浮动时：浮动元素盖在非浮动元素上，非浮动元素里面的行内元素或文本会围绕浮动元素
• 对子元素的影响：
  • 如果父元素为浮动元素（没有定义height），并且它的子元素也是浮动元素，则这个浮动元素会自适应地包含该子元素
  • 如果父元素不为浮动元素（没有定义height），子元素是浮动元素，则会造成高度塌陷

5.浮动的副作用（总结）

• 父元素高度塌陷，从而导致边框不能撑开，背景色无法显示
• 页面布局错乱（浮动元素在盒子上层，如果有元素设置了position,那就是position元素在最上层）

6.清除浮动

• clear : both（不建议使用）
  • 运用方式：clear属性不是应用于浮动元素本身，而是应用于浮动元素后面的元素
  • 注意事项：运用该clear:both来清除浮动，会添加一个无意义的div标签，这种做法不太好，因为会添加多余标签，且还会破坏html的语义性
• overflow : hidden（看情况用）
  • 运用方式：overflow并不用在当前的浮动元素，而是应用于浮动元素的父元素
  • 注意事项：overflow是一个“小炸弹”，他会隐藏超出父元素的内容部分，有时候这并不是我们预期的效果
• ::after为元素（重点理解）

// 语法
.clearfix{ *zoom : 1}  // clearfix是自定义class名称，可以自己随意取，不过建议取这个名字
.clearfix::after{
    clear:both;
    content:"";
    display:block;
    height:0;
    visibility:hidden;
}

//用法：将父元素加上 class="clearfix" 就可以清除浮动了