首页 > 其他 > 详细

清除浮动与浮动闭合

时间:2014-06-02 18:14:42      阅读:322      评论:0      收藏:0      [点我收藏+]

       浮动(float)在网页布局中随处可见,通过浮动,我们能很方便地布局,但浮动之后遗留下来太多的问题需要解决,特别是IE6-7

浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?下面将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。

一、清除浮动还是闭合浮动 (Enclosing float or Clearing float)?

很多人都已经习惯称之为清除浮动,我也一直这么叫着,但是确切地来说是不准确的。我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题。

1)清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none;

2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。

.main:很抱歉,现代浏览器中我没能把warp撑高(float:left)
.side:我也浮动了(float:left)
.main:warp自己闭合浮动了,所以footer不用再清除浮动了(float:left)
.side:我也浮动了(float:left)

闭合浮动的几种方法

1)添加额外标签

<div class="warp">
<div class="main left">.main:很抱歉,现代浏览器中我没能把warp撑高(float:left)</div>
<div class="side left">.side:我也浮动了(float:left)</div>
</div>

2)使用 br标签和其自身的 html属性

.main{float:left;}
.side{float:right;}

3)父元素设置 overflow:hidden

.main{float:left;}
.side{float:right;}

6)父元素设置display:table

.main{float:left;}
.side{float:right;}

清除浮动与浮动闭合,布布扣,bubuko.com

清除浮动与浮动闭合

原文:http://www.cnblogs.com/hansu/p/3720954.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!