html的塌陷原理是什么,HTML&CSS基础之高度塌陷问题

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

本篇文章要说的是怎么解决高度塌陷问题，首先先了解下什么是高度塌陷。

高度塌陷

在文档流中，父元素的高度默认是子元素撑开的，也就是子元素多高，父元素多高。但为子元素设置浮动以后，子元素会完全脱离文档流，会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样会导致页面布局混乱。如果父元素不包含任何的可见背景，这个问题会很难被注意到，但这是一个很重要的问题。解决高度塌陷方案一：

根据W3C标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC，可以设置打开或者关闭，默认关闭，开启BFC以后，元素具有以下属性：

1、父元素的垂直外边距不会和子元素重叠

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

3、开启BFC元素可以饱含浮动的子元素

那么，如何开启元素的BFC呢，如下

1、设置元素浮动：导致元素负宽度丢失，下面元素上移

2、设置元素绝对定位

3、将设置元素为inline-block：可解决宽度丢失

4、将元素的overflow设置为一个非visible的值：overflow: hidden; zoom:1;(注意zoom: 1仅支持IE)解决高度塌陷方案二：

可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素高度的，然后再对其清除浮动：clear: both;，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用，但是会在页面中添加多余的结构解决高度塌陷方案三：

通过after伪类向元素添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，且不会在页面中添加多余的div，几乎没有副作用，如下：1

2

3

4

5

6

7

8

9

clearfix:after{

content: "";

display: block;

clear: both;

}

本文到此结束，谢谢大家~