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

overflow: auto;

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

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

  

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

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

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

给父级div添加浮动

1
.parent{float:left}

  利弊:代码简单,排版找虐

 

第四种:display:table:

  Amaze ui 里am-g的用法

1
.parent{ display:table}

  利弊:代码简单,盒模型变成表格,此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符(弊端?)。

 

 第五种:高端借鉴:

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

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

 

1
2
.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的下面。


Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐