标签：标签 code content flow clear 比较 span 缺点 布局
1 <div class="container"> 2 <p style="float:left">这是一段浮动文字</p> 3 </div>
1.在container父容器末尾加上一个清除浮动的div标签
1 <div class="container"> 2 <p style="float:left">这是一段浮动文字</p> 3 <div style="clear:both"></div> 4 </div>
这种方法的缺点是在html结构中增加了许多无意义的标签
2.给父容器也添加float:left
这种方法不推荐使用，因为一旦html结构层次比较多时，就要不断在每个父容器上添加浮动属性，影响整个页面的布局
3.在父容器上添加overflow属性
添加overflow:auto或者overflow:hidden都可以，添加overflow属性后浮动元素就会重新回到父容器中
4.在父元素添加.clearfix:after（推荐）
1 <div class="container clearfix"> 2 <p style="float:left">这是一段浮动文字</p> 3 </div>
1 .clearfix{ 2 content:"."; 3 display:block; 4 height:0; 5 clear:both; 6 visibility:hidden; 7 } 8 9 .clearfix{ /*兼容IE6、7*/ 10 zoom:1; 11 }
这个方法的原理与第一种方法类似，是目前比较推荐的用法
标签：标签 code content flow clear 比较 span 缺点 布局
原文地址：http://www.cnblogs.com/NickyLi/p/6708306.html
