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

Html学习笔记 专栏收录该内容
1 篇文章 0 订阅

第一种方式:开启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>


  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值