前端–解决浮动引起的高度塌陷问题

今天学习了如何解决HTML页面子元素浮动时由于脱离文档流导致的其父元素(未设置宽高)高度塌陷的问题。接下来，我们来谈谈这个问题的解决步骤。

首先我们先引出一个概念:Block Fomatting Context，我们称为块格式化上下文 简称BFC，这是每个元素都具有的一个属性！

开启BFC的元素都有以下特点:

1.开启了BFC的元素与其父元素的垂直外边距不会发生重叠

2.开启了BFC的元素会包含其浮动的子元素*

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

那么如何开启BFC呢？

1.display:inline-block

 -这种方式虽然能够撑开父元素，且下面元素布局不会受到影响，但是会使父元素宽度丢失。

2.设置元素浮动

-这种方式虽然能够撑开父元素，但会使父元素宽度丢失，且下面所有元素的布局也会向上挪动，影响布局

3.overflow:hidden

-副作用最小的开启BFC的方式

以上是开启BFC来解决高度塌陷问题。

解决高度塌陷还有另一种方案：

原理：给浮动的元素下面添加一个兄弟元素，然后这个元素只要设置了clear:both;那么就可以解决高度塌陷的问题,是不是很神奇！这个呢原因就在于clear属性的特点是:使当前元素不受规定一侧其他浮动元素对该元素的影响。当我们在浮动元素下加一个清除浮动了的盒子后，虽然上面元素还是浮动的，但是下面盒子的显示就好像上面元素没有浮动似的，就会在浮动元素的下方显示，因为下方的盒子没有浮动，真实存在，那么就会撑开父元素，所以高度塌陷的问题就解决了！ 但是呢？虽然这种解决方式是W3C推荐的方式，但是这种解决高度塌陷的方式又有那么一点点缺点，那就是我们无缘无故的添加了一个div块，等于在页面中又添加了一个结构。所以根据同一原理又引出了另一种方案。

最终版的解决方案就是我们自己不手动在HTML中添加div盒子，而是通过css来设置：给父元素设置一个伪元素选择器 :after，代码如下：

          .d1{        /*这是父元素的类选择器*/

                border:2px solid red;

            }

            .d1:after{      /*添加一个伪元素选择器，利用CSS让父元素在其最后添加一个块元素，并清除浮动*/

                content:"";

                display: block;

                clear: both;

            }

            .d2{    /*这是浮动了的子元素类选择器*/

                width:100px;

                height:100px;

                float:left;

                background-color: aqua;

            }

利用CSS来解决高度塌陷使我们最推荐使用的方法！