浮动心得总结

一、浮动的本质是为了实现文字环绕的效果;

二、清除浮动带来的影响:        

1. 普通浏览器 fix:after{content:'';display:table;clear;both}

2.IE8 fix{*zoom=1 }

三、浮动与流式布局

1.文字环境衍生-单侧固定,浮动与单侧尺寸固定的流体布局

    https://www.imooc.com/code/2889

    width+float

    padding-left/margin-left

2.DOM与显示位置匹配的单侧固定布局,浮动与右侧尺寸固定的流体布局

https://www.imooc.com/code/2890

    width:100%+float

    padding-left/margin-left

    width+float+margin负值

3.高级进化-智能自适应尺寸,浮动与两侧皆自适应的流体布局

https://www.imooc.com/code/2888

    float

    display:table-cell     IE8+

    display:inline-block   IE7

本文心得来自张鑫旭大师慕课网的css深入了解之float 浮动

你可能感兴趣的:(浮动心得总结)