float带来的问题

float带来的问题
1.float: right 右浮动时，靠右换行（错行）的解决方法
描述：当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。把右浮动的标签放在正常标签的前面即可。

<div class="banner">
        <div class="no-float"></div>
        <div class="foat-r"></div>
    </div>

解决：把右浮动的标签放在正常标签的前面即可。

    <div class="banner">
        <div class="foat-r"></div>
        <div class="no-float"></div>
    </div>

2.浮动造成换行问题
描述：例子如：两个div设置了左浮动，想第三个div换行
（如果第三个也是左浮动，则宽度小于父元素剩余宽度的话，就不会换行；如果第三不是浮动等特殊情况，会覆盖第一个div位置，但文字不会覆盖而是环绕）

解决：给第三div设置style="clear:both"

3.浮动会造成 父元素塌陷 问题。
如果一个父元素的所有子元素都是浮动的，子元素的浮动确定了自身位置，尽管子元素有高度，但是不会影响到父元素的高度，那么这个父元素高度就是0（若没有指的宽度，就是父元素宽度）。如果想要父元素内的浮动元素占有父元素的高度，就需要清除浮动。

解决方法：
.parent:after {  
            content: " ";    
            display: block;   
            clear: both;     
        }  

还有两种不推荐的解决方法：

• 在具有浮动元素的父容器中置“overflow”的属性值为“hidden”
• 在容器的结束标签前添加一个空的div，在空div上直接设置样式“clear:both”
  参考