CSS 浮动（float）带来的影响及解决方法

    本人入行前端已经三年，但由于种种原因只有一年的工作经验，而且没有进行总结，实在惭愧！！！就以这篇博客为新的起点吧！
    作为前端程序员，会发现很多浏览器兼容性方面的问题，以及页面编写过程中某些问题的固定处理办法，所以就需要一一记录下来方便日后遗忘的时候能够很快应用到实际项目中。当然在学习新知识时也可以作为某些疑难知识点的记录，方便日后查阅。数年后在回顾历程相信会有不少感慨！
    元素设置 float: left; 属性后会变为块级元素，但它又和普通的块级元素有区别，普通的块级元素会独占一行，浮动后的块级元素会一个接一个的排列。因此它会影响后续的元素排版。下面的代码列举了两种清除浮动的办法（都用到了 clear: both; 属性，但写法上不同，适用场景也就不同了）：

    
    
    


    
下面的 p 元素相对于本元素p margin-top 定位，但是也会受 .box 盒子的影响。

    
    

        
.box
        
.box
        
.box
            
    

    
    
受浮动（float）影响的元素

    浮动（float）的问题当然不只这些！以上只是个人工作学习中的记录，以后会进一步的添加。

    由于个人能力有限难免不会出现错误，如有发现欢迎大家留言指证！