CSS 浮动

概述：

网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式。

浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。

浮动属性

float
    left 左浮动 【从左向右排】
    right 右浮动 【从右向左排】
    none 不浮动(默认值)

div{
    /* float:right;
     float:none; */
     width: 100px;
 

   height: 100px;
}
.box{
     background-color: red;
}
.box2{
     background-color: green;
}
.box3{
     background-color: blue;
}

<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>

浮动的基本特性

可以使块元素在一行排列
脱离文档流 【不再占原来位置】
提升层级【浮动元素会覆盖普通元素】

文档流

所有可见元素在文档中排列占位称为文档流

标准流（普通文档流）

块元素从上向下排列
行内元素从左向右排列

浮动的问题（为什么要清浮动）

子元素浮动导致父元素高度塌陷 （背景、边框无法正常）
影响之后元素的布局

清浮动的方法

解决浮动问题即清除动的方法：

父元素固定高度法
描述：给浮动元素的父元素固定高度
缺点：不够灵活

父元素overflow方法
描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现
缺点：可能会隐藏内容或触发不需要的滚动条

额外标签法
描述：在浮动元素的【最后】，父元素之内，加一个空【不浮动块元素】，且添加样式【clear:both】;
clear属性说明
作用：清除浮动

取值
left 清除左浮动
right 清除右浮动
both 清除左、右浮动
提示通常使用both,
缺点：代码冗余，影响代码可读性

伪元素:after清浮动
伪元素：after介绍

语法：.box:after{ content:"123";}

表示在元素内部的最后位置生成一个内容是123，默认以行内形式存在
描述：给浮动标签的父标签添加 .clearfloat

.clearfloat:after{
content:"";
display: block;
clear:both;
}

优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用

浮动特性总结

脱离文档流
提升层级
对块元素的影响
使块元素在一行排列
未定宽度的块元素适应内容
对行内元素的影响
生成了一个块级框即
（1）支持宽高
（2）支持垂直方向的margin,padding
（3）支持行高、text-align等文本属性

浮动包含浮动子元素高度不塌陷
浮动不会出现margin值塌陷
浮动脱离文档流不脱离文本流 （引起文本绕排）

浮动特性应用实例

应用实例—图文绕排

总结：浮动脱离文档流不脱离文本流
扩展了解：
最初只用于在成块的文本内浮动图像，
现在它已成为在网页上创建多列布局的最常用工具之一

应用实例—两列自适应

实现要点：单列定宽，单列自适应
浮动实现
说明：
左侧列固定，左侧浮动，右侧列使用margin-left预留位置。
右侧列固定同理
代码演示