浏览器兼容性经典问题（四）更好的清除浮动

最新推荐文章于 2022-03-30 21:09:05 发布

speed_feng

最新推荐文章于 2022-03-30 21:09:05 发布

阅读量3.5k

点赞数 1

分类专栏： web前端文章标签：清除浮动

本文链接：https://blog.csdn.net/speed_feng/article/details/8246252

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

问题描述：

在你使用css的过程中，多多少少会遇到清除浮动这个问题。

在一个div容器里面，容器中含有一个浮动的div，在浮动元素后面还有一些块元素。如果浮动的高度大于容器被非浮动元素撑开的高度，那么浮动元素就会超出容器。具体代码如下。

问题代码：

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style>
		body{
			padding:0px;
			margin:0px;
		}

		#container{
			font-size:20px;
			background-color:#eee;
			border:solid 3px #ddd;
		}

		#float_box{
			background-color:#fff;
			border:solid 3px #bbb;
			width:80px;
			height:100px;
			float:left;
		}
		</style>
	</head>

	<body>
		<div id="container">
			<div id="float_box">floated element</div>
			<h>the container</h>
		</div>

	</body>
</html>

各浏览器的效果图：（左为chrome 中间为firefox 右边为IE6）

注释：

在上面的的浏览器效果图中，能看到，float浮动元素并没有把父级元素contianer撑开，而是非浮动元素把父级元素container撑开，这是因为float元素并不属于文档流而造成的。所以导致了子元素的高度超过了父级元素。

我们其实可以通过人为地设置container的高度而是float元素乖乖得留在container元素中，但是这样设置就很死板，而且对流式布局等产生很多不方便的问题。

那么这时我们就需要清除浮动，让container在不设置高度的情况下自动撑开。

解决方法：

在IE8+以及主流的浏览器中，都支持:after这个伪类，我们可以通过在float浮动元素后面增加一些内容来撑开container，而在IE6 7中，我们则通过一些值的设置来触发IE特有的haslayout属性。

解决代码：

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style>
		body{
			padding:0px;
			margin:0px;
		}

		.clearfix:after{
			content:"";
			height:0px;
			visibility:hidden;
			display:block;
			clear:both;
		}
			
		* html .clearfix{
			zoom:1;
		}
			
		#container{
			font-size:20px;
			background-color:#eee;
			border:solid 3px #ddd;
		}

		#float_box{
			background-color:#fff;
			border:solid 3px #bbb;
			width:80px;
			height:100px;
			float:left;
		}
		</style>
	</head>

	<body>
		<div id="container" class="clearfix">
			<div id="float_box">floated element</div>
			<h>the container</h>
		</div>

	</body>
</html>

注释：

给需要撑开的父级元素container添加上类class=clearfix，在css中添加以上新的css代码即可。

content:" ";height:0px;visibility:hidden;这三句为了在container后面的内容不可见，

display:block是用于替换掉默认的display:inline，因为clear属性不能用于行内元素，

clear：both是清除浮动

在IE6 7中，利用zoom:1触发haslayout属性即可。

各浏览器效果图：（左chrome 中间firefox 右边IE6）