关于float的值与浮动失效问题

float属性定义在哪个方向浮动，有三个值，分别为left,right,none,inheirt。

• left : 向左浮动
• right：向右浮动
• none:不浮动
• inheirt:从父元素继承float属性的值

<style>
.div1{
width:300px;
height:200px;
float:left;
}
.div2{
width:300px;
height:300px;
float:right;
}

</style>
<div>
<div class="div1">这是第一个div元素<div>
<div class="div2">这是第二个div元素<div>
</div>

此时的两个div可分别向左和向右浮动。

浮动失效问题：

1.如果第一个div左浮动，第二个div不设置浮动，则会出现浮动问题，第一个div左浮 动，会脱离文档流，第二个div会将第一个div覆盖。

2.将浮动元素设置为绝对定位（position:absolute）时，则会出现浮动失效.

3.当元素设置为display:none;时，无法实现浮动。

4.当元素所在的位置宽度不够时，使用浮动会到下一行。