高度塌陷问题描述

1、页面高度塌陷问题
- (1)产生原因
- (2)正常标准流盒子
- (3)子盒子浮动
- (4)归纳总结
1.1、清除浮动本质
1.2 、清除浮动的方法
- (1)方法一：额外标签法
- (2)方法二：给父级添加overflow属性方法
- - ①一个BFC的小知识
- (3)方法三：使用after伪元素清除浮动
- (4)方法四：clearfix类解决高度塌陷（推荐）
1.3、一个常用布局框架实例

1、页面高度塌陷问题

(1)产生原因

我们都知道当元素浮动后，可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。如果没有设置高度，那么包含框父元素默认是被子元素撑开的，当子元素设置浮动后，子元素会脱离文档流，父元素不被子元素撑开，就会出现父元素的高度塌陷问题；

(2)正常标准流盒子

子盒子是标准流，父盒子没有高度，但是会被撑开高度。
①代码如下：

<style>.s{width:700px;background-color: antiquewhite;border: solid 3px red;}.s1{width: 200px;height:100px;background-color: aqua;text-align: center;line-height: 100px;}.s2{width: 150px;height:200px;background-color:blueviolet;text-align: center;line-height: 200px;}.s3{width:250px;height: 150px;background-color: chartreuse;text-align: center;line-height: 150px;}
</style><body><div class="s"><div class="s1">1</div><div class="s2">2</div><div class="s3">3</div></div>
</body>

②页面如下：

(3)子盒子浮动

子盒子浮动，脱离标准流，父盒子没有高度，高度为零，不会被撑开盒子。
①代码如下：

<style>.s{width:700px;background-color: antiquewhite;border: solid 3px red;}.s1{width: 200px;height:100px;background-color: aqua;text-align: center;line-height: 100px;float:left;}.s2{width: 150px;height:200px;background-color:blueviolet;text-align: center;line-height: 200px;float:left;}.s3{width:250px;height: 150px;background-color: chartreuse;text-align: center;line-height: 150px;float:left;}
</style><body><div class="s"><div class="s1">1</div><div class="s2">2</div><div class="s3">3</div></div>
</body>

②页面如下：

(4)归纳总结

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
准确地说，并不是清除浮动，而是清除浮动后造成的影响。

1.1、清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。

1.2 、清除浮动的方法

首先看一下语法：

/*clear 清除*/
选择器{clear:属性值;
}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响（最常用）

(1)方法一：额外标签法

它是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签
①代码段如下：

<style>.s4{clear:both;}
</style>
<body><div class="s"><div class="s1">1</div><div class="s2">2</div><div class="s3">3</div><div class="s4"></div></div>
</body>

②页面如下;

总结：

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。

(2)方法二：给父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。

①一个BFC的小知识

①什么是BCF（Block Formatting Context）及如何利用BFC？
官方解释： bfc是web页面中盒模型布局的css渲染模式。
通俗来讲：我们写css样式时，对一个元素设置css，我们首先要知道这个元素是块级元素还是行内元素，而bfc就是用来格式化块级盒子的。
Fromatting Context：指的是页面中一块渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
②BFC如何生成
满足下列css声明之一的元素便会生成BFC
1.float的值不为none
2.overflow的值不为visible
3.position的值不为static或relative
4.display的值为inline-block,table-cell,table-caption
5.flex box(元素的diaplay：flex或inline-flex)
③BFC的布局规则
简单归纳如下：
1.内部元素会在垂直方向一个接一个排列，可以理解为BFC中的一个常规流。
2.元素垂直方向上，同一个BFC的两个相邻盒子的margin会发生重叠
3.BFC区域不会与float元素区域重叠
4.计算BFC的高度，浮动子元素也会参与计算
5.BFC的子元素不会影响到外面的元素
然后接下来我们来说overflow：hidden原理
如下：当给父元素添加overflow：hidden后，父元素就就生成了一个BFC块，所以计算父元素高度的时候，根据上面的介绍，BFC的浮动子元素也会参与高度计算，BFC就把浮动的子元素高度当做自身高度去处理溢出，内部的元素不会影响外面的布局，所以外面看是清除了浮动。
①代码如下：

<style>.s{width:700px;background-color: antiquewhite;border: solid 3px red;overflow: hidden;}</style><body><div class="s"><div class="s1">1</div><div class="s2">2</div><div class="s3">3</div></div>
</body>

②页面如下：
总结：

优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

(3)方法三：使用after伪元素清除浮动

为了解决高度塌陷问题，我们采用方法一添加了一个空的div元素，并且设置了其css属性，虽然解决了问题，但是div是一个html元素，html只负责页面的框架，最好可以不显式添加div元素来解决问题，所以有了方法三的出现。
:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了
①代码如下：

<style>.s{width:700px;background-color: antiquewhite;border: solid 3px red;}.s1{width: 200px;height:100px;background-color: aqua;text-align: center;line-height: 100px;float:left;}.s2{width: 150px;height:200px;background-color:blueviolet;text-align: center;line-height: 200px;float:left;}.s3{width:250px;height: 150px;background-color: chartreuse;text-align: center;line-height: 150px;float:left;}.s::after{content: "";/* ::after默认添加的是一个行内元素，手动将其设置为块元素 */display: block;clear:both;}
</style>
<body><div class="s"><div class="s1">1</div><div class="s2">2</div><div class="s3">3</div></div>
</body>

②页面展示：

(4)方法四：clearfix类解决高度塌陷（推荐）

下面是更为通用的CSS代码解决高度塌陷问题，不仅可以解决高度塌陷的问题，也可以解决外边距重叠的问题。

实际情况复杂，不一定是要在元素的开始位置添加元素，也可能需要在元素的结束位置添加元素来解决问题，所以更为通用的代码，可以选择元素的开始位置和结束位置，对元素的开始位置和结束位置都添加空元素来解决问题

通过对元素的开始或结束位置添加元素，并且对元素属性设置为display: table;不仅可以解决高度塌陷的问题，也可以解决外边距重叠的问题，所以下面的代码更为通用，可以解决高度塌陷的问题和外边距重叠问题

下面的代码是一个类选择器与伪元素选择器，选中clearfix类的元素的开始和结束位置

在需要解决高度塌陷的问题或外边距重叠问题时，只需要在元素的类添加clearfix类即可

①代码段如下：

<style>.clearfix::after,.clearfix::after{content: "";/* display: table;用来解决 高度塌陷的问题、外边距重叠问题，在解决外边距重叠问题上，display: blob不行，只能使用table，所以使用display: table */display: table;   /* clear: both;解决高度塌陷的问题 */clear: both;
</style>
<body><div class="s clearfix"><div class="s1">1</div><div class="s2">2</div><div class="s3">3</div></div>
</body>

②页面展示：

1.3、一个常用布局框架实例

①代码如下：

<!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>
</head>
<style>body{margin: 0; padding: 0;}.container{width: 1000px;/* height: 1500px; *//* border:solid 2px red; */margin: 30px auto 0px;}/* .col2{border:solid 2px rebeccapurple;} */.col2 .col2-1{width:700px;height:300px;background-color: red;float:left;}.col2 .col2-2{width:280px;height:300px;background-color: yellow;float:right;}/* 此处用了上述的方法一，运用额外标签法 */.clear{clear:both;}.col3{/* border:solid 2px rgb(188, 83, 156); */margin-top: 20px;}.col3 .col3-1{width:200px;height: 300px;background-color: aqua;float: left;}.col3 .col3-2{width: 400px;height: 300px;background-color: chartreuse;margin-left: 20px;float: left;}.col3 .col3-3{width: 360px;height: 300px;background-color: coral;float:right;}/* 此处用了上述的方法四，运用伪元素after */.clearfix::after{content: "";display: block;clear:both;}.coln{/* border: solid 2px rgb(188, 83, 156); */margin-top:20px;}ul{list-style: none;margin:0;padding:0;}/* .coln ul{background-color:antiquewhite;} */.coln ul li{/* border:solid 1px red;宽度超过1000px总宽度 */width: 190px;height: 200px;margin: 5px;float: left;background-color: rgb(173, 225, 227);}</style>
<body><div class="container"><div class="col2"><div class="col2-1"></div><div class="col2-2"></div><div class="clear"></div></div><div class="col3 clearfix"><div class="col3-1"></div><div class="col3-2"></div><div class="col3-3"></div></div><div class="coln"><ul class="clearfix"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</body>
</html>

②页面展示：

【CSS解决页面高度塌陷问题】相关推荐

css 高度塌陷_HTML+CSS入门 HTML高度塌陷以及定位详解
本篇教程介绍了HTML+CSS入门 HTML高度塌陷以及定位详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲 ...
CSS: 解决100% 高度失效 height 100% is not working when scrolling down page
原代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
html垂直居中vertical,HTML_CSS解决未知高度垂直居中，尽管有CSS的vertical-align特性， - phpStudy...
CSS解决未知高度垂直居中尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, ...
html的高度塌陷,html高度塌陷以及定位的理解
高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲box2多高,box1就多高.此时如果子元素设置浮动,则会导致其完全脱离文档流,子元素脱离文档流将无法撑开父元素, 导致父元素的高度丢失,就是 ...
CSS元素高度塌陷的几种常见解决办法！
同学们在进行页面布局的时候,经常会使用到float浮动进行样式控制,但如果我们没有设置父元素的高度的时候使用浮动就会导致后面的子元素出现问题,也就是高度塌陷.下面小千就给大家介绍几种常见的解决CSS高 ...
css防止高度塌陷,css之高度塌陷及其解决方法
浅谈清除浮动的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素 ...
CSS——高度塌陷以及解决方法
文章目录前言一.什么是高度塌陷? 二.高度塌陷的解决方法 1.解决方法 2.开启BFC 3.开启BFC的特点总结前言本文主要介绍了高度塌陷产生的原因以及解决方法一.什么是高度塌陷? 高度塌 ...
html标签高度塌陷,CSS中如何解决高度塌陷问题
CSS中如何解决高度塌陷问题发布时间:2021-06-11 18:23:40 来源:亿速云阅读:58 作者:Leah 这篇文章将为大家详细讲解有关CSS中如何解决高度塌陷问题,文章内容质量较高,因 ...
css 高度塌陷_css中父元素高度塌陷是什么意思，如何解决？（附代码）
本篇文章给大家带来的内容是关于css中父元素高度塌陷是什么意思,如何解决?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先得回答什么是父元素高度塌陷: 在文档流中,父元素的高度默 ...

【CSS解决页面高度塌陷问题】

高度塌陷问题描述

1、页面高度塌陷问题

(1)产生原因

(2)正常标准流盒子

(3)子盒子浮动

(4)归纳总结

1.1、清除浮动本质

1.2 、清除浮动的方法

(1)方法一：额外标签法

(2)方法二：给父级添加overflow属性方法

①一个BFC的小知识

(3)方法三：使用after伪元素清除浮动

(4)方法四：clearfix类解决高度塌陷（推荐）

1.3、一个常用布局框架实例

【CSS解决页面高度塌陷问题】相关推荐

最新文章

热门文章