内部DIV设置浮动后无法撑开外部DIV的解决办法

每次做东西都会遇到，每次都记不住，记录下来分享给大家。

第一种：在外层DIV，也就是这里的DIV1的CSS里面加入以下CSS代码

overflow: auto;

这种方法都可以实现DIV2把DIV1撑开。不过这里建议大家使用第一种方法，要养成一个习惯，在浮动应用完后消除浮动，这样后面的DIV就不会继承这个浮动（就像在编程的时候，在打开数据库，操作完后，要养成个习惯在后面把数据库关闭）。也就是说浮动这个东西会被继承，除非消除这个浮动，才不会让后面接着的DIV受到继承。其实不仅是DIV，其他的像P等其他的容器都会有继承的效应，大家要养成一个习惯记得要消除浮动。

第二种： 在浮动元素结尾添加一个空的div：

<div style="clear:both"></div>

利弊：方法简单，常用，有违结构与表现分离原则

第三种：爸爸跟着儿子一起浮动：

给父级div添加浮动

.parent{float:left}

利弊：代码简单，排版找虐

第四种：display:table:

Amaze ui 里am-g的用法

.parent{ display:table}

利弊：代码简单，盒模型变成表格，此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

第五种：高端借鉴：

方法2跟4的升级版，不破坏结构

.parent:before,.parent:after {
content:"";
display:table;
}
.parent:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
.parent { zoom:1; }

.parent:after {content:"/200B"; display:block; height:0; clear:both; }
.parent { *zoom:1; }

浮动注意事项：

1.若内层div浮动的外层div也需要浮动。内层div用了float则其已经脱离了标准文档流，外层div不浮动则无法被内层浮动后脱离文档流的div撑起来。（通过外层div设置border颜色可以验证）当然，若你对外层div是否被撑起来没什么要求，也可以不予浮动。不浮动的外层div，可以用来控制其与其他临近非浮动元素的位置关系，如居中的margin：0 auto；等等。
2.多个div块通过float：left从左往右排开，则这几个div都要float：left浮动起来。
3.外层div浮动后紧跟着的不浮动对象（比如有一个div）要在其CSS中用clear：both清除浮动；否则该不浮动对象将钻到浮动div的下面。