清除浮动与浮动闭合

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

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

一、清除浮动还是闭合浮动 （Enclosing float or Clearing float）？

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

1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；

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

.main：很抱歉，现代浏览器中我没能把warp撑高(float:left)

.side：我也浮动了(float:left)

.footer：我通过设置
clear:both 清除浮动,虽然位置正确了,但是 warp 的高度没变,有些不爽

.main：warp自己闭合浮动了，所以footer不用再清除浮动了(float:left)

.side：我也浮动了(float:left)

.footer：这次 warp 人品爆发了, 通过 .clearfix
已经闭合浮动了

闭合浮动的几种方法

1）添加额外标签

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

.warp {

1. border: 1px solid rgb(0, 0, 255);


2. width: 600px;


3. margin: 30px
   auto 5px;


4. background: rgb(245, 245, 245);

}

div {

1. padding: 15px
   20px;


2. font-size: 14px;


3. color: rgb(51, 51,
   51);

}

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

.main{float:left;}

.side{float:right;}

.footer

3)父元素设置 overflow：hidden

.main{float:left;}

.side{float:right;}

.footer

6）父元素设置display:table

.main{float:left;}

.side{float:right;}

.footer

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