浮动的语法

浮动

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

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

标准文档流：块级盒子垂直排列，行级盒子水平排列

脱离文档流

语法：float

取值：left左

right右

none不浮动

浮动特性

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

可以使元素脱离文档流

可以使元素提升层级

可以使行级元素设置宽高

浮动带来的问题

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

影响后面元素的布局

清除浮动

固定高度法

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

优点：代码简洁

缺点：不够灵活

溢出隐藏法

给父元素添加overflow属性，overflow值不为visible，其他值都可以实现

不隐藏（默认值）：overflow:visible;

溢出隐藏：overflow:hidden;

溢出显示滚动条：overflow:scroll;

溢出自动显示滚动条：overflow:auto;

优点：代码简洁

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

额外标签法

在浮动元素的最后面加一个空的块级标签，此元素本身不浮动，并且添加样式clear属性（作用：清除浮动）

取值：left 清除左浮动

right 清除右浮动

both 清除左右浮动

优点：无

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

伪元素法

after：在wrap元素里面最后面加一个伪类元素（行级元素）

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

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

给浮动元素的父元素添加盒类名clearfix

.clearfix:after{

content: ” ” ;

display:block;

clear:both;

}

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