今天学习了如何解决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来解决高度塌陷使我们最推荐使用的方法！
网友评论