浮动二三事

浮动二三事

浮动

1、没有设定宽度的块级元素设置float左/右浮动之后，其宽度会随其内容而撑开，如果没有内容，那么整个块等同于消失。（浮动让元素inline-block化）

2、补充：无论当下什么类型的元素，在设置了浮动或绝对定位后，其显示方式都会按照inline-block来处理；

浮动影响

1、浮动会脱离文档流，但仍然影响着布局！

2、元素设置浮动造成的影响：

A、 紧邻其后（Html结构）的那一个元素被影响：布局上，block元素会无视该浮动元素的存在，inline-block会看到浮动元素的存在继而紧跟在后面同占一行；而不论是block还是inline-block，元素包含的文字部分始终不会无视浮动元素的存在，文字们会包围紧靠着它（最早诞生的浮动就是针对图片，为了做图文环绕效果）。
Case:

B、 父元素被影响：若子元素全部浮动了，那么，原本能够被子元素撑开的父元素也无法撑开了，背景色、背景图也都无法显示，因为父元素现如今等于没有包含任何元素了，其高度为0；

清除浮动

清除浮动，确切的说是：清除浮动带来的影响。

1、clear:both法（有2种应用模式）
A、在浮动元素后结尾处加入带clear:both;样式的标签；
如：<div style=“clear:both;”></div>
不足：存在过多无意义的div标签

B、给浮动元素的父元素CSS的after伪元素实现底部生成：

.father:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}

不足：IE6/7不认识after伪元素

2、overflow:hidden法
给浮动元素的父元素设置：overflow:hidden；

总结

上述3种方法均可以清除浮动。成功清除浮动，可以理解为，让受到浮动影响的父元素和浮动元素后的那个元素能够正视浮动元素的存在，恢复正常的布局。

注意

<div style=“clear:both;”></div>需要紧跟在浮动元素后，才能清楚该浮动带来的影响；如果中间隔着非浮动元素，那么该非浮动元素仍然是非正常的布局，它仍然受到浮动的影响。

解析

A、通过父元素处清除浮动：
1、父元素本身开始正视浮动子元素的存在，继而恢复撑开状态；
2、父元素其后的元素布局不受影响，也恢复正常；

B、通过添加标签<div style=“clear:both;”></div>清除浮动：
1、若该Div在父元素内，则父元素和父元素其后的元素恢复正常布局；
2、若该Div在父元素外（跳过父元素结束标签），则父元素后的元素恢复正常布局；

一句话小结

<div style=“clear:both;”></div>插入位置后开始正视前方浮动元素的存在，恢复正常布局；