大大哟nice的博客

学习的成长之路

HTML学习笔记 解决div浮动 高度塌陷问题

第一种方式:开启BFC属性

<!doctype html>
<html>
	<head>
		<title></title>
		<mata charset="utf-8"/>
		<style type="text/css">
		.box1{
			border:10px red solid;
			/*
				根据W3C的标准,在页面中的一个隐含的属性叫做Block Formatting Context
				简称BFC,该属性可以设置打开或者关闭,默认关闭的。
				当开启元素的BFC以后,元素将会具有如下的特性:
				1.父元素的垂直外边距不会和子元素重叠
				2.开启BFC的元素不会被浮动元素所覆盖
				3.开启BFC的元素可以包含浮动的子元素
				
			推荐开启方式:将overflow设置为hidden
				可以保证父元素的宽度不丢失,同时不会导致下边的元素上移
			*/
			overflow:hidden;
			/*兼容IE6及其以下版本*/
			zoom:1;
		}
		.box2{
			width:100px;
			height:100px;
			background-color:blue;
                        /*设置向左浮动*/
                         float:left;
		}
		.box3{
			height:200px;
			background-color:yellow
		}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	<body>
</html>

第二种方式:通过clear属性来清除浮动

<!doctype html>
<html>
	<head>
		<title></title>
		<mata charset="utf-8"/>
		<style type="text/css">
		.box1{
			border:1px solid red;
		}
		.box2{
			width :100px;
			height:100px;
			background-color:blue;
			float:left;
		}
		/*
			通过after伪类,选中box1的后边
			可以通过after伪类向元素的最后添加一个空白的块元素,
			然后对其清除浮动
		*/
		.clearfix:after{
			content:"";
			display:block;
			clear:both;
		}
		/*
			兼容IE6(IE6不支持after伪类)
		*/
		.clearfix{
			zoom:1;
		}
		</style>
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="box2"></div>
		</div>

	<body>
</html>


阅读更多
文章标签: html
个人分类: Html学习笔记
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

HTML学习笔记 解决div浮动 高度塌陷问题

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭