浮动与清除浮动

网页布局的核心就是用CSS来摆放盒子位置，把盒子摆放到合适的位置需要用到CSS的定位机制。CSS的定位机制有三种，普通流(标准流)，浮动和定位。

(1)普通流

实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列。

(2)浮动

(1)浮动最早是用来做文字环绕图片效果的。后来才开始用浮动的特性来布局。

江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。"我好气呀.jpg" alt="">忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。忆江南,怎不忆江南,日出江花红胜火,春来江水绿如蓝。 忆江南,怎不江南,日出江花红胜火,春来江水绿如蓝。

(2)体会浮动:

(3)浮动体现在漂浮在标准流的上方

• 浮动指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。
• 浮动脱离标准流,不占位置,会影响标准流,只有左右浮动。
• 浮动首先创建包含块的概念(包裹)。

200300

• (4)浮动的元素总是找距离它最近的父级元素对齐，但是不会超出内边距的范围。

"father">"son">

(5)浮动的元素排列位置

• 浮动的元素排列位置,跟上一个元素(块级)有关系。
• 如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；
• 如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

熊大熊二

(6)元素添加浮动后,元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或默认的内容的多少。

昨夜雨疏风骤昨夜雨疏风骤人生天地间,忽如远行客.人生天地间,忽如远行客.

浮动总结：
浮动的目的是为了让多个块级元素在同一行上显示。

清除浮动所造成的影响:
为什么清除浮动？
由于浮动元素不再占用源文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题就需要清除浮动。本质是为了解决父级元素因为子级浮动引起内部高度为0的问题。

清除浮动的方法：

(1)额外添加法

W3C推荐的做法是通过在浮动元素末尾添加一个空的标签 或者其他标签亦可。

        .clear {clear:both;} 

优：通俗易懂,书写方便.
劣：添加许多无意义的标签,结构化较差。

(2)父级添加overflow属性方法
通过触发BFC的方式，可以实现清除浮动效果。

overflow: hidden;

可以给父级添加：overflow为hidden | auto | scroll都可以实现
优:代码简洁
劣:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

(3)使用after伪元素清除浮动
:after方式为空元素的升级版,好处就是不用单独加标签了。
使用方法：

        .clearfix:after {/* 转换为块级元素 */display: block;content: ".";height: 0;/* 隐藏盒子 */visibility: hidden;/* 清除浮动 */clear: both;}.clearfix {/* *代表只有IE6.7能识别的特殊符号,zoom就是ie6.7清除浮动的方法 */*zoom:1;}

优：符合闭合浮动思想 结构语义化正确
劣：由于IE6-7不支持:after，使用zoom:1触发hasLayout。
代表网站：百度、淘宝网、网易等。

(4)使用before和after双伪元素清除浮动

       .clearfix:before,.clearfix:after {content: "";/* 触发bfc 防止外边距合并 */display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}

优：代码更简洁
劣：由于ie6,7不支持：after，使用zoom：1触发ayout。
代表网站：小米、腾讯等。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！