CSS浮动原理-通俗易懂

接触CSS已经有一段时间了，但是对于CSS中的浮动和清除浮动一直迷迷糊糊，直到最近看到一篇文章才恍然大悟~

　　在此总结成简单的语言，分享刚刚接触CSS或者也对浮动不理解的朋友们（本篇文章只针对性的讲解浮动，入门教程不妥之处请您指正！）

　　div元素是块级元素，它的特点是独占一行且从上到下排列，形成流。上才艺：

　　　　　　　　　　　　

　　可以看到即使div1和div3的宽度很小，一行中完全可以容下他们，但是还是另起一行，这就是div的特点。PS:仅限标准文档流中。

　　有时候标准流的布局不符合我们的要求，像这样：

　　　　　　　　

　　这个时候我们就需要用到浮动来去实现这种效果

　　当我们给div元素添加浮动的时候，div就会脱离标准文档流，div元素会漂浮在标准文档流之上，举例子：

　　　　　　　　

 

 

　　当我去给div1添加 float：left 时，div1元素脱离标准文档流，漂浮在标准文档流之上，而div2与div3会自动上移顶替div1的位置，重新排列形成一个新的标准文档流

 

　　由于div1是漂浮在标准文档流上的，所以div1会盖住div2

 

　　这里div1用到了float：left（左浮动）可以理解为漂起来后向左排列，float：right（右浮动）可以理解为向右排列，注：左右指的是浏览器页面的左、右边缘。

 

　　刚才我们给div1加了左浮动，如果我们只给div2和div3添加左浮动呢？

 

　　　　　　　　　

　　我们可以看到div3移动到了div2的右边，但是div2并没有移动到div1的右边，因为div1没有给它添加浮动，它不是浮动元素。

　　重点来了！！！重点来了！！！重点来了！！！

　　如果元素A是浮动的，元素A的上一个元素也是浮动的，那么元素A会跟随上一个浮动元素的后边（若一行放不下，另起一行），如果元素A的上一个元素属于标准文档流中，那么元素A的垂直位置不会发生变化，元素A的顶部紧贴上一个元素底部。

　　　　前、后，左、右在浏览器中的示意图

　　　　　　

干货来了！！

　　下面我们再使用右浮动来证实并复习一遍：

　　

 

　　

 　　我们给div2、div3设置了右浮动，div3发现它上一个元素div2是浮动元素，那么div3会跟随div2之后（前后概念参考上边的图），div2发现它上一个元素不是浮动元素，那么div2的垂直位置没有发生变化，div2的顶部依旧与div1的底部对齐。

　　到了这里各位基本已经掌握了浮动，感谢观看！