html 盒子模型基础(高度塌陷问题,BFC详解)(六)

1.高度塌陷问题解决:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				/*设置一个边框*/
				border: 10px red solid;
				/*
				 	父元素的高度,默认被子元素撑开,目前来讲box2多高,box1就多高。
				 	此时如果子元素设置浮动,则会导致其完全脱离文档流,子元素脱离文档流将无法撑开父元素,
				 	导致父元素的高度丢失,就是我们说的高度塌陷问题。父元素一旦高度塌陷,则它下边的元素会向上移动,
				 	导致整个页面的布局混乱
				 * */
				
				/*指定父元素的高度,但是将父元素的高度写死将无法自动适应子元素的高度,不太灵活*/
				/*height: 200px;*/
				
				
				/*
				 	BFC (Block Formatting Context) 块级格式化环境
				 		- BFC是元素的隐含属性,默认情况下BFC是关闭的,当元素开启BFC以后将会具有如下特性:
				 			1.开启BFC以后,元素不会被浮动的元素所覆盖
				 			2.开启BFC以后,子元素的垂直外边距不会传递给父元素
				 			3.开启BFC以后,元素可以包含浮动的子元素
				 			
				 	我们并不能直接去开启BFC,而需要使用一些特殊的样式来间接的打开元素的BFC,
				 		开启BFC的方式很多,但是都会有一些副作用,我们需要选择一些副作用小的方式
				 		
				 		1.设置元素的浮动		
				 		2.设置元素的display为inline-block
				 		3.设置元素绝对定位。。。
				 		4.将元素的overflow设置为一个非visible的值
				 * 
				 * */
				
				/*float: left;*/
				/*display: inline-block;*/
				overflow: hidden;
				
			}
			
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				
				/*设置子元素向左浮动*/
				float: left;
			}
			
			.box3{
				height: 100px;
				background-color: #bfa;
			}
			
		</style>
	</head>
	<body>
		
		<div class="box1">
			
			<div class="box2"></div>
			
		</div>
		
		<div class="box3"></div>
		
	</body>
</html>

2.BFC详解:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 300px;
				height: 300px;
				background-color: red;
				/*开启父元素的bfc*/
				overflow: hidden;
			}
			
			.box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				margin-top: 100px;
			}
			
			
			.box3{
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
				float: left;
			}
			
			.box4{
				width: 100px;
				height: 100px;
				background-color: skyblue;
				/*开启BFC*/
				overflow: hidden;
			}
			
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
		
		<div class="box3"></div>
		<div class="box4"></div>
	</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咸鸭蛋炒饭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值