CSS中清除浮动的方法

1.加高法

浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。

<div>   → 设置height
	<p></p>
	<p></p>
	<p></p>
</div>

<!--more--> <div> → 设置height <p></p> <p></p> <p></p> </div>

2.clear:both法

最简单的清除浮动的方法,就是给盒子增加clear:both;表示自己的内部元素,不受其他盒子的影响。

<div>
	<p></p>
	<p></p>
	<p></p>
</div>

<div>   → clear:both;
	<p></p>
	<p></p>
	<p></p>
</div>

浮动确实被清除了,不会互相影响了。但是有一个问题,就是margin失效。两个div之间,没有任何的间隙了。

3.隔墙法

在两部分浮动元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追前面的浮动元素。墙用自己的身体当做了间隙。

<div>
	<p></p>
	<p></p>
	<p></p>
</div>

<div class="cl h10"></div>

<div>
	<p></p>
	<p></p>
	<p></p>
</div>

我们发现,隔墙法好用,但是第一个div,还是没有高度。如果我们现在想让第一个div,自动的根据自己的儿子,撑出高度,我们就要想一些“小伎俩”,“奇淫技巧”。

4.内墙法

<div>
	<p></p>
	<p></p>
	<p></p>
	<div class="cl h10"></div>
</div>

<div>
	<p></p>
	<p></p>
	<p></p>
</div>

内墙法的优点就是,不仅仅能够让后部分的p不去追前部分的p了,并且能把第一个div撑出高度。这样,这个div的背景、边框就能够根据p的高度来撑开了。

5.overflow:hidden

这个属性的本意,就是将所有溢出盒子的内容,隐藏掉。但是,我们发现这个东西能够用于浮动的清除。我们知道,一个父亲,不能被自己浮动的儿子撑出高度,但是,如果这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度了。这个现象,不能解释,就是浏览器的小偏方。并且,overflow:hidden;能够让margin生效。

<div> ---->设置overflow:hidden属性
	<p></p>
	<p></p>
	<p></p>
</div>

<div>
	<p></p>
	<p></p>
	<p></p>
</div>
文章目录
  1. 1. 1.加高法
  2. 2. 2.clear:both法
  3. 3. 3.隔墙法
  4. 4. 4.内墙法
  5. 5. 5.overflow:hidden
|