前端学习笔记( 三 ) 之 CSS 浮动布局

CSS 浮动布局

float : left | right
特点 : 
    1.元素浮动之后不占据原来的位置(脱标)
    2.浮动的盒子在一行上显示
    3.行内元素浮动之后转换为行内块元素(不推荐使用,转行内元素还是用display:inline-block)
作用 :
    1.文本绕图
    2.制作导航
    3.网页布局

//清除浮动
当父盒子没有定义高度,嵌套的盒子浮动后,下边的元素发生未知错误
1.清除浮动不是不用浮动,清除浮动产生的不利影响.
2.清除浮动的方法
clear : left | right | both(最常用)
在最后一个浮动元素后添加标签.

overflow : hidden //这种有弊端 出了盒子就不能用这个了

伪元素清除浮动

.clearfix:after{
    content:".";
    display:block;
    height:0;
    line-height:0;
    visibility:hidden;
    clear:both;
}
//兼容ie浏览器
.clearfix{
    zoom : 1 ;
}

Overflow