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

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

<div class="parent" style="width:300px; background-color:Red;">

测试

<div class="child" style="width:100px; height:100px; background-color:Green; float:left; margin:10px;">

左边

</div>

如图

 

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

　　

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

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

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

给父级div添加浮动

.parent{float:left}

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

 

 方法3：display:table:

　　Amaze ui 里am-g的用法

.parent{ display:table}

　　利弊：代码简单，盒模型变成表格，此元素会作为块级表格来显示（类似 <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; }

　　

　　

 

转载于:https://www.cnblogs.com/yunfly/p/5949571.html