天天看点
返回

CSS之解决高度塌陷问题方法终极版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				border: 1px solid red;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
			/*
			 * 通过after伪类添加一个空白的块元素，然后对其清除浮动
			 * 而且不会在结构中添加div
			 */
			.clearfix:after{
				/*添加一个内容*/
				content: "";
				/*转换一个块元素*/
				display: block;
				/*清除两侧浮动*/
				clear: both;
			}
			/*
			 * 在IE6中不支持after伪类，还需hasLayout解决问题
			 */
			.clearfix{
				zoom : 1;
			}
		</style>
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="box2"></div>
			
		</div>
	</body>
</html>
HTML&amp;&amp;CSS css 高度塌陷 clear
上一篇: （28）字符截取命令cut、printf
下一篇: 【转载】网络协议之:sctp流控制传输协议

继续阅读