CSS——浮动的清除

最新推荐文章于 2025-05-20 10:04:41 发布

原创最新推荐文章于 2025-05-20 10:04:41 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

css

32 篇文章

订阅专栏

现在有两个div，div身上没有任何属性，每个div中都有li，这些li都是浮动的。

清除浮动的方法1
给浮动的元素的祖先元素加高度：如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子才能关住浮动。

在以下例子中，div中有很多li，li在浮动，所以div必须要有高度。只要浮动在一个有高度的盒子中，这个浮动就不会影响后面的浮动元素。

	<style type="text/css">
		li{
			float: left;
			width: 120px;
			height: 40px;
			margin-right: 10px;
			background-color: gold;
			text-align: center;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>橘生淮南</li>
			<li>最好的我们</li>
			<li>你好旧时光</li>
		</ul>
	</div>

	<div>
		<ul>
			<li>时间的女儿</li>
			<li>漫长的告别</li>
			<li>被偷走的那五年</li>
		</ul>
	</div>
</body>

原本这些li会分为两排，但是第二组中的第一个li贴着第一组中的最后一个li。因为div没有高度，不能给自己浮动的元素一个容器。浮动和浮动之间互相有影响。
所以增加一个div的style：

	div{
		height: 80px;
		border: 1px solid #000;
	}

清除浮动的方法2
clear: both
其实在网页制作中，高度height很少出现，因为能被内容撑高。方法1在工作中用的很少。所以如果想不写height也能清除浮动的话，则：

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			float:left;
			width:120px;
			height:40px;
			text-align:center;
			background-color:orange;
		}
		.box2{
			clear: both;
		}
	</style>
</head>
<body>
	<div class="header">
		<ul>
			<li>一点点</li>
			<li>Coco</li>
			<li>甜荟</li>
		</ul>
	</div>

	<div class="box2">
		<ul>
			<li>火锅</li>
			<li>串串</li>
		</ul>
	</div>
</body>

第二个div写一个clear: both;属性，指的是左浮动、右浮动都要清除。即清除别人对我的影响。
这种方法有一个致命的问题：margin失效了。

清除浮动的方法3 隔墙法

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			float:left;
			width:120px;
			height:40px;
			text-align:center;
			background-color:orange;
		}
		.box2{
			clear: both;
		}
		.cl{
			clear:both;
		}
		.h10{
			height:10px;
			background-color:lightpink;
		}
	</style>
</head>
<body>
	<div class="header">
		<ul>
			<li>一点点</li>
			<li>Coco</li>
			<li>甜荟</li>
		</ul>
	</div>
	
	<div class="cl h10"></div>

	<div class="box2">
		<ul>
			<li>火锅</li>
			<li>串串</li>
		</ul>
	</div>
</body>

即< div class=“cl h10”>< /div>这堵墙隔开了两部分浮动，高度也可以靠自己的身高来撑。两部分浮动互不影响。

隔墙法虽然好用，但是第一个div还是没有高度，如果现在让第一个div自动根据自己的儿子撑出高度，就要想一些“奇淫技巧”，如内墙法。与隔墙法相比，不仅能隔开浮动，还能在第一个div里撑出高。

内墙法（即把< div class=“cl h10”></ div>放入第一个< div>中）

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			float:left;
			width:120px;
			height:40px;
			text-align:center;
			background-color:orange;
		}
		.box2{
			clear: both;
		}
		.cl{
			clear:both;
		}
		.h10{
			height:10px;
			background-color:lightpink;
		}
	</style>
</head>
<body>
	<div class="header">
		<ul>
			<li>一点点</li>
			<li>Coco</li>
			<li>甜荟</li>
		</ul>
		<div class="cl h10"></div>
	</div>
	
	<div class="box2">
		<ul>
			<li>火锅</li>
			<li>串串</li>
		</ul>
	</div>
</body>

一个奇淫技巧：

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}

		div{
			background-color:blue;
		}
		p{
			float:left;
			width:100px;
			height:100px;
			background-color:green;
		}
		.cl{
			clear:both;
		}
	</style>
</head>
<body>
	<div class="header">
		<p></p>
		<div class="cl"></div>
	</div>
</body>
</html>

一个父亲是不能被浮动的儿子撑出高的，脱标之后撑不出高。
这种时候产生一种绑定关系，改一个p中的高度，就要改div的高度。

	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		div{
			height:190px;
			border:10px solid black;
		}
		.p1{
			float:left;
			width: 100px;
			height:150px;
			background-color:red;
		}
		.p2{
			float:left;
			width:100px;
			height:230px;
			background-color:yellow;
		}
		.p3{
			float:left;
			width:100px;
			height:190px;
			background-color:aliceblue;
		}
	</style>
</head>
<body>
	<div class="p1"></div>
	<div class="p2"></div>
	<div class="p3"></div>
</body>
</html>

但是，只要清除div中的高，
并且

.cl{
	clear: both;
	}

同时

<body>
	<p class="p1"></div>
	<p class="p2"></div>
	<p class="p3"></div>
	<div class="cl"></div>
</body>

就可以清除浮动。

当两个p都浮动，所以div不能被撑出高，而在家里面修一堵墙就能够让div被儿子撑出高了。奇淫公式：

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

清除浮动的方法4：overflow. hidden;
表示溢出隐藏，即所有溢出边框的内容都要隐藏掉。
本意是清除溢出到盒子外面的文字，但它可以是偏方。

	div{
		width: 400px;
		border: 10px solid black;
		overflow: hidden;
	}

	.box{
		overflow: hidden;
		margin-bottom: 10px;
	}

一个父亲不能被自己浮动的儿子撑出高度，但是如果这个父亲加上了overflow: hidden; 那么这个父亲就能够被浮动的儿子撑出高度了。并且overflow: hidden; 能够让margin生效.

总结：
浮动的元素，只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，这个盒子有高，那么浮动不会相互影响。但是在实际工作中并不会给所有的盒子加高度，因为麻烦，并且不能适应页面的快速变化。所以我们要找到不给盒子加高度，但能够清除浮动的方法。

上述知识点所遇到的浏览器兼容问题：

一、 IE6 不支持小于12px的盒子，任何小于12px的盒子，在IE6中看着都大。
解决办法：将盒子的字号设小，使其小于盒子的高，比如0px:

height: 4px;
_font-size:0px;

浏览器hack：使用浏览器提供的后门，针对某一种浏览器做兼容。
IE6留了一个后门，就是只要给CSS属性之前加上下划线，这个属性就是IE6认识的专有属性，如：_background-color: green;

解决微型盒子的正确写法：

height:10px;
_font-size:0;

二、IE6不支持用overflow: hidden; 来清除浮动的
解决办法：以毒攻毒，追加一条

_zoom:1;

完整写法：

overflow:hidden;
_zoom:1;

_zoom1;能够触发浏览器hasLayout机制，只有IE6有，我们只需要让IE6好用。

overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，这个功能是IE6兼容的，不兼容的是overflow:hidden;清除浮动的时候。

以上关于IE6的兼容问题，都是通过多写一条hack来解决的，这个称为伴生属性：

height:6px;
_font-size:0;

overflow:hidden;
_zoom:1;