使用浮动改变元素的默认排列方式。

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

浮动:

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

标准文档流:

块级盒子垂直排列，行级盒子水平排列

脱离文档流；

语法：float

取值：left 左

right 右

none 不浮动

浮动带来的问题:

1、子元素浮动导致父元素高度塌陷

2、影响后面元素的布局

-->

<!--

清除浮动的方法:

方法一:

给浮动元素的父元素设置固定高度

缺点:不够灵活

优点:代码简洁

方法二:

overflow方法

给父元素添加overflow属性，overflow值不为visible，其他的值都可以解决父元素 高

度塌陷问题

优点:代码简洁

缺点:可能会隐藏内容或者触发不需要滚动条

方法三:

额外标签法:(不推荐)

在浮动元素的最后加一个空的块级标签，此元素本身不浮动，并且添加样式 clara属性

缺点:代码冗余，影响代码可读性

clear属性

取值: 作用:清除浮动

left 清除左浮动

right 清除右浮动

both 清除左右浮动

方法四:伪元素after(推荐)

给浮动元素的父元素添加

clearfix:after{

content:"";

display:block;

clear:both;

}

优点:内容适应性强，不会在结构上产生元素代码，可以多次重复使用

语法:

after：在wrap元素里面的最后面加一个伪元素

content 属性就是往伪元素里面写内容

before 在wrap元素里面的最前面加一个伪元素

浮动的特性:

1、可以使块级元素在一排排列

2、可以使元素脱离文档流

3、可以使元素提升层级

4、可以使行级元素设置宽高

实现要点:单列定宽，单列自适应

左侧列固定，左侧浮动，右侧使用margin-left预留位置

右侧列固定:右侧浮动，左侧使用margin-right预留位置

总结:浮动脱离文档流不脱离文本流