关于html中的高度塌陷问题和4个解决方法

最新推荐文章于 2024-07-25 11:52:08 发布

北柠陌语

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量3.1k

点赞数 3

分类专栏： html 文章标签： html html5 前端

本文链接：https://blog.csdn.net/SSSS__AS/article/details/125519869

版权

html 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、高度塌陷问题

定义：设置元素脱离文档流，那就无法撑开父元素高度，导致父元素的高度消失，使得页面布局混乱，这就叫高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            border: 10px red solid;
            
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color:blue;
            float: left;
        }
        .box2{
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

二、高度塌陷问题的解决方法

1. 将父元素的高度固定（不推荐使用）

.outer{

border: 10px red solid;

height: 100px;

}

当父元素的高度被写死后，父元素的高度就就不能自动适应子元素的高度了，不利于布局，所以不推荐。

2.开启元素的BFC

开启BFC后，元素将会具有如下的特性：

1.父元素的垂直外边距不会和子元素重叠 (解决父子外边距重叠的问题)

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

3.开启BFC的元素可以包含浮动的子元素（可解决高度塌陷）

如何开启元素的BFC

1.设置元素浮动（不推荐） float: left

- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失

而且使用这种方式也会导致下边的元素上移，不能解决问

2.设置元素为inline-block（不推荐） display: inline-block;

可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

3.将元素的overflow设置为一个非visible的值 overflow: hidden;

4.设置元素绝对定位 position: absolute;

元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失

而且使用这种方式也会导致下边的元素上移，不能解决问题

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。

3.清除浮动（clear）基本没有副作用

clear可以用来清除其他浮动元素对当前元素的影响

可选值：

none，默认值，不清除浮动

left，清除左侧浮动元素对当前元素的影响

right，清除右侧浮动元素对当前元素的影响

both，清除两侧浮动元素对当前元素的影响，清除对他影响最大的那个元素的浮动

原理：

设置了 clear 的元素，通过调整自身来使自己不要和浮动元素排列在一起。

类似于给自己加个margin-top

方法：

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

<style type="text/css">
	.box1{
		width:100px;
		height:100px;
		background-color: #bfa;
		/*设置box1向左浮动*/
		float:left;
}
	.box2{
		width:200px;
		height:200px;
		background-color:yellow;
/*由于受到box1向左浮动的影响，box2整体向上移动了100px
		/*清除box1浮动对box2产生的影响
		清除浮动之后，元素会回到其他元素浮动之前的位置*/
		clear:left;
		float:right;
}
	.box3{
		width:300px;
		height:300px;
		background-color:yellowgreen;
		clear:both;
}
</style>
<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
</body>

4.添加空白div

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。

  .box1:after {
        /*添加一个内容*/
        content: "";
        /*转换为一个块元素*/
        display: block;
        /*清除两侧的浮动*/
        clear: both;
      }

北柠陌语

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
关于html中的高度塌陷问题和4个解决方法

二、高度塌陷问题的解决方法1. 将父元素的高度固定（不推荐使用） .outer{ border: 10px red solid; height: 100px; }当父元素的高度被写死后，父元素的高度就就不能自动适应子元素的高度了，不利于布局，所以不推荐。1.父元素的垂直外边距不会和子元素重叠 (解决父子外边距重叠的问题)2.开启BFC的元素不会被浮动元素所覆盖3.开启BFC的元素可以包含浮动的子元素（可解决高度塌陷） 1.设置元素浮动（不
复制链接

扫一扫