让内层浮动的Div将外层Div撑开 -----清浮动

清浮动的好处写多了都能体会到,解决高度塌陷, 一般情况下是要清除浮动的,不然会影响下面标签的排版。

测试


左边


如图

让内层浮动的Div将外层Div撑开 -----清浮动_第1张图片

 

方法1: 在浮动元素结尾添加一个空的div:

  

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

方法2:爸爸跟着儿子一起浮动:

给父级div添加浮动

.parent{float:left}

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

 

 方法3:display:table:

  Amaze ui 里am-g的用法

.parent{ display:table}

  利弊:代码简单,盒模型变成表格,此元素会作为块级表格来显示(类似

),表格前后带有换行符(弊端?)。

 

 方法4:高端借鉴:

   方法1跟3的升级版,不破坏结构

.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; }

  

  

 

你可能感兴趣的:(让内层浮动的Div将外层Div撑开 -----清浮动)