《HTML+CSS》视频12 高度塌陷

最新推荐文章于 2024-01-11 09:24:14 发布

原创最新推荐文章于 2024-01-11 09:24:14 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

HTML+CSS 专栏收录该内容

14 篇文章

订阅专栏

博客介绍了HTML和CSS中高度塌陷问题，即子元素浮动后无法撑起父元素高度。阐述了开启BFC解决高度塌陷的方法，如设置浮动、绝对定位等，还提到IE6需开启hasLayout。此外，介绍了clear属性及两种解决高度塌陷的方法，包括添加元素和使用伪类。

高度塌陷问题

父元素的高度默认被子元素撑开，但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，将会导致父元素的高度塌陷。

根据W3C标准，在页面中，元素都有一个隐含的属性叫做Block Formatting Context,简称BFC，该属性默认关闭，当开启后，元素将会有如下特性：

父元素的垂直外边距将不会和子元素重叠，给子元素设置外边距时，外边距不会传递给父元素
开启BFC的元素不会被浮动元素覆盖
开启BFC的父元素可以包含浮动的子元素

如何解决高度塌陷？

如何开启BFC?

设置浮动
设置元素绝对定位
设置元素inline-block
将元素的overflow设置为一个非visible的值

为父元素设置float可以包含浮动的子元素，但是会导致父元素宽度丢失，而且下面的元素会上移。

设置inline-block可以解决问题，但是也会造成父元素宽度丢失。

因此解决高度塌陷的最佳方式是设置overflow的值：

overflow:hidden;
overflow:auto;

但是这种方法会切除掉不在显示范围内的相对定位的元素。

IE6及以下的版本不支持BFC，所以这种方式不能兼容IE6

在IE6中有另一个隐含属性hasLayout，该属性和BFC类似，在IE6中可以通过开启hasLayout来解决该问题，开启的方法之一是，将元素的zoom值设置为1即可。zoom表示放大的意思，数值表示放大倍数。在IE6中，如果设置了宽度，也会开启hasLayout。

zoom:1;

所以如果要兼容所有浏览器，就需要两个都写

overflow:hidden;
zoom:1;

Chrome开发者工具

clear

clear可以清除其他元素对当前元素产生的影响，可选值：

none：默认值，不清除
left：清除左侧清除左侧浮动元素对当前产生的影响
right：清除右侧浮动元素对当前产生的影响
both：清除两侧元素产生的影响

解决高度塌陷：

方法一：
所以可以在父元素的最后添加一个元素，并且将这个兄弟元素的clear设置为both，所以当前面的子元素浮动时，这个没有高度的，并且清除了兄弟元素浮动对其产生影响的元素，刚好可以把父元素的高度撑开到原始位置。使用这种方式虽然可以解决问题（W3C推荐方法），但是会在我们页面中添加多余的结构，所以这种方式并不完美。

方法二：
我们可以通过after伪类,向父元素的最后添加一个空白的块元素，并且对其清除浮动，可以达到和上面相同的效果。但是在IE6中不支持伪类，所以，需要使用hasLayout处理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box1{
				border:1px red solid;			
			}
			.box2{
				width:100px;
				height:100px;
				background-color:#bfa;
				float: left;
			}
			.clearfix:after{
				content:"";
				/*将添加的内容设置为块元素*/
			   display: block;
			   clear: both;
			}
			/*兼容IE6*/
			.clearfix{
			zoom:1;
			}
		</style>
	</head>
	<body>
		<div class="box1 clearfix">
			<div class="box2"></div>			
		</div>
	</body>
</html>