高度塌陷

最新推荐文章于 2023-08-20 13:59:37 发布

心文花雨

最新推荐文章于 2023-08-20 13:59:37 发布

阅读量176

点赞数

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

本文链接：https://blog.csdn.net/xinwenhuayu/article/details/104194729

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

一、BFC

1. 简介

根据W3C标准，在页面中有一个隐藏的属性Block Formating Context属性 BFC，该属性默认是关闭的，该属性开启时，具有如下属性:

(1) 父元素的垂直边距不会和子元素重叠

(2) 开启BFC的元素不会被浮动元素所覆盖

(3) 开启BFC的元素可以包含浮动的子元素

2. 如何开启BFC:

(1) 设置浮动元素

会导致元素宽度丢失，下边的元素上移，不能解决问题

(2) 设置元素的绝对定位

(3) 设置元素为: inline-block

可以解决问题，但会导致宽度丢失

(4) 将元素的overflow设置为非visible

将overflow设置为hidden是副作用最小的开启方式

注意: IE6以下的浏览器不支持BFC，IE6拥有hasLayout,例: zoom:1，写几就放大几倍，1表示不放大，但开启 hasLayout，zoom只在IE支持

二、clear

1. 属性:

none: 没有，默认

left: 清除左侧

right: 清除右侧

both: 清除影响最大的一侧

2. 注意

可以直接在高度塌陷的父元素的最后添加一个空白的div，由于这个div并没有浮动，所以它可以撑开父元素高度，然后对这个div清除浮动，这样可以通过这个空白的div撑开父元素的高度，使用这种方式可以解决问题，但会在页面中添加多余的结构

三、after伪类

通过after伪类向元素的最后一个空白块添加一个块元素，然后对其清除浮动，这样做和添加一个div的原理一样，且结构中没有多余的div，IE6还需要使用hasLayout

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1 {
				border: 1px solid red
			}
			.box1:after {
				content: "";
				display: block;
				clear: both;
			}
			.box2 {
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

心文花雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高度塌陷

一、BFC1. 简介根据W3C标准，在页面中有一个隐藏的属性Block Formating Context属性 BFC，该属性默认是关闭的，该属性开启时，具有如下属性:(1) 父元素的垂直边距不会和子元素重叠(2) 开启BFC的元素不会被浮动元素所覆盖(3) 开启BFC的元素可以包含浮动的子元素2. 如何开启BFC:(1) 设置浮动元素会导致元素宽度丢失，下边的...
复制链接

扫一扫

专栏目录