CSS浮动

1：浮动

float:left/right; 向左/右浮动；

  浮动特性：

（1）:脱离标准流的控制（浮）移动到指定位置（动），浮动的盒子不在保留原来的位置

（2）：如果多个盒子都设置了浮动，则它们会按照属性值一行内显示且顶端对齐排列；

（3）：浮动元素具有行内块元素的特性

2：清除浮动

选择器 {clear:属性值;}

        属性值 描述

        left         不允许左侧有浮动元素(清除左侧浮动的影响)

        right       不允许有责有浮动元素(清除右侧浮动的影响)

both 同时清除左右两侧浮动的影响

3：清除浮动--额外标签法：

在最后一个浮动元素标签后加上额外标签，额外标签必需是块级元素，不能是行内元素

如：<div class="clear"></div>

.clear {

clear:both;

}

4：清除浮动--父级添加overflow

可以给父级添加overflow属性，将其属性设置为hidden,auto,scroll;(一般为hidden)

如：

<div class="box">

        <div class="damao"></div>

        <div class="ermao"></div>

</div>

.box {

        overflow:hidden;

}

5：清除浮动--：after伪元素法

父元素添加以下代码：

.clearfix:after {

content:"";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix {

*zoom:1;

}

6：清除浮动--双伪类元素清除浮动

给父级元素添加以下代码：

.clearfix:before,.clearfix:after {

content:"";

display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

*zoom:1;

}