浮动会让父元素高度塌陷

<p></p> is block element, so its must be in the new line, not at the same line with the image

消除浮动带来的影响：

1. clear:both 与外部有联系

2. BFC/haslayout 封闭的结构

策略：

.fix:after{} 高级浏览器

.fix{} IE6,IE7

zoom:1能够触发haslayout特性，用于兼容IE6/7的清除浮动。但绝大多数现代浏览器不兼容。

以下是老师课程中关于清除浮动的总结，希望对你有帮助：

清除浮动的两种基本方法：1、在高度塌陷的父元素底部插入具有clear:both声明的元素，比如在html中插入一个多余的块级元素div，或者插入不兼容IE6/7的CSS伪元素after。这种方法与外界有接触，可能导致顶部margin重叠。2、触发BFC/haslayout这两种特性。与外界隔绝，没有margin重叠问题。

BFC，Block formatting context是高级浏览器特有的概念，具有包裹性。不能应用于所有场景。

haslayout是IE6/7私有的概念。

下面是部分能够触发这两种特性的属性： float:left/right、position:absolute/fixed、overflow:hidden/scroll (IE7+)、display:inline-block/table-cell(IE8+)、width/height/zoom:1/… (IE6/IE7)。

权衡以上问题后的清除浮动策略：

.clearfix:after { content: ''; display: block; height: 0; overflow: hidden; clear: both; }--使用CSS伪元素after，插入一个内容为空、高度为0的块级元素来clear，并且用overflow的hidden触发了BFC。

.clearfix { *zoom: 1; }--兼容IE6/7的写法，触发haslayout。

IE7不知道还用不用，

  浮动的特性

浮动会让inline元素block化

overflow:hidden 作用是超出区域则隐藏，不出现滚动条，作用于父元素。如果当前div没有高宽限制，则随内边的容器而变化。
clear:both 就是清除浮动，作用于子元素。

http://www.cnblogs.com/socool-hu/p/5633110.html

clear会产生margin重叠而bfc不会，bfc会把包含内的所有css属性作用与本身，不对外部造成影响，外部margin-top不会被其影响，而clear如果设置margin-bottom的话，会对外部其他元素造成影响，最明显的就是margin重叠，

display:table之后，标签并没有变成table,而是有了table类似的属性，比如自动包裹内容，自成一行等等。但是毕竟还不是table，所以和table的样式没有关系。

浮动的本质是文字环绕，图片设置浮动，父元素高度塌陷，由于具有“包裹性”，实体依旧存在，与文字处于同一文档流中，不会与文字重叠，形成文字包裹图片的形式

【浮动与两侧皆自适应的流体布局】

/* 下面这个是固定布局写法 */

.mib_cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }

display:table-cell会触发BFC,作用是清除浮动影响 

*号的作用是用于IE6/7的浏览器 

浮动与两侧皆自适应的流体布局，核心代码 

左侧div: float: left;   右侧div: display: table-cell; width: 9999px; <---没错width就是 9999px

【浮动与单侧尺寸固定的流体布局】

/* 下面这个是固定布局写法 */

.mib_feed_fixed { width: 484px; float: left; }

/* 下面这个是流体布局写法 */

.mib_feed_flow { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }

【浮动与右侧尺寸固定的流体布局】

/* 下面这个是右浮动，改变DOM位置的流体布局写法 */

.mib_head_r { width: 56px; float: right; }

.mib_feed_flow { margin-right: 76px; }

/* 下面这个是左浮动，不改变DOM位置的流体布局写法 */

.mib_full_float { width: 100%; float: left; }

.mib_head_l { width: 56px; float: left; margin-left: -56px;}

清除浮动带来的影响：

.clearfix:after { content:""; display:table; clear:both;}

.clearfix { *zoom:1;}

应用在包含浮动子元素的父级元素上

两种方法的差异： clear：与外界还有联系，例如会产生margin重叠的效果 

BFC/haslayout（应用于父元素）:封闭，里面的声明不会对外界产生影响，例如float不会出现margin重叠，但也有缺陷，无法使用所有浏览器

float去空格：

<script>

var trigger = document.getElementById("trigger"),

     buttons = document.getElementsByTagName("button");

var length = buttons.length;

if (trigger && length > 0) {

    trigger.onclick = function() {

        for (var index = 0; index < length; index += 1) {

            buttons[index].style["cssFloat" in trigger.style? "cssFloat": "styleFloat"] = "left";

        }

    };

}

</script>

第一个是使用了"clear:both"但是它会与margin重叠，则margin-botttom无法发挥作用；
第二个是使用了“overflow：hidden”使得元素BFC化，包裹好了，不影响margin-bottom发挥作用

1. html block 水平元素底部<div></div>

2. .clearfix:after