css中父元素高度塌陷怎么解决

这篇“css中父元素高度塌陷怎么解决”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“css中父元素高度塌陷怎么解决”文章吧。

　　首先得回答什么是父元素高度塌陷：

　　在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

　　一下是举例说明:

　　<pclass="box1">

　　<pclass="box2"></p>

　　</p>

　　<styletype="text/css">

　　.box1{

　　border:10pxredsolid;

　　}

　　.box2{

　　background-color:yellow;

　　width:100px;

　　height:100px;

　　float:left;

　　}

　　</style>

　　清除浮动详解

　　清除浮动主要是为了解决由于浮动元素脱离文流导致的元素重叠或者父元素高度坍塌的问题，而这两个问题分别对应了需要清除浮动的两种种情况：清除前面兄弟元素浮动和闭合子元素浮动（解决父元素高度坍塌）。

　　清除前面兄弟元素浮动

　　清除前面兄弟元素浮动很简单，只需要在不想受到浮动元素影响的元素上使用clear:both即可，HTML&CSS代码如下：

　　<pclass="fl">我是左浮动元素</p>

　　<pclass="fr">我是右浮动元素</p>

　　<pclass="cb">我不受浮动元素的影响</p>

　　.fl{

　　float:left;

　　}

　　.fr{

　　float:right;

　　}

　　.cb{

　　clear:both;

　　}

　　在CSS2以前，clear的原理为自动增加元素的上外边距（margin-top）值，使之最后落在浮动元素的下面。在CSS2.1中引入了一个清除区域（clearance）&mdash;&mdash;在元素上外边距之上增加的额外间距，使之最后落在浮动元素的下面。所以如果需要设置浮动元素与clear元素的间距，得设置浮动的元素的margin-bottom，而不是clear元素的margin-top。

　　demo可见：clear清除浮动

　　闭合子元素浮动

　　我们知道，在计算页面排版的时候，如果没有设置父元素的高度，那么该父元素的高度是由他的子元素高度撑开的。但是如果子元素是设置了浮动，脱离了文档流，那么父元素计算高度的时候就会忽略该子元素，甚至当所有子元素都是浮动的时候，就会出现父元素高度为0的情况，这就是所谓的父元素高度坍塌问题。为了能让父元素正确包裹子元素的高度，不发生坍塌，我们需要闭合子元素的浮动。

　　一般我们有两种办法可以用来闭合子元素浮动：

　　给最后一个元素设置clear:both

　　给父元素新建一个BFC(块格式化上下文)

　　clear:both

　　由于我们最后一个元素使用clear:both，所以该元素就能不受浮动元素影响出现在父元素的最底部，而父元素计算高度的时候需要考虑到这个正常元素的位置，所以高度自然包裹到了最底部，也就没有了坍塌。

　　对于这个方法，以前我们是利用新增一个空元素（<b>或<span>或<p>等）来实现的，如下：

　　<pclass="container">

　　<pclass="box"></p>

　　<spanclass="clear-box"></span>

　　</p>

　　.box{

　　float:left;

　　}

　　.clear-box{

　　clear:both;

　　}

　　虽然这种办法比较直观，但是不是很优雅，因为增加了一个无用的空白标签，比较冗余而且不方便后期维护（一般不太建议使用该办法）。所以后期有了通过父元素的伪元素（::after）实现的著名clearfix方法，代码如下：

　　<pclass="containerclearfix">

　　<pclass="box"></p>

　　</p>

　　.clearfix::after{

　　content:"";

　　display:table;

　　clear:both;

　　}

　　上面方法给父元素增加一个专门用于处理闭合子元素浮动的clearfix类名，该类使用::after伪元素类选择器增加一个内容为空的结构来清除浮动，可能你们比较疑惑的是为什么要设置display:table属性，这其实涉及到一个比较复杂的进化过程，具体可以参考资料&mdash;&mdash;clearfix浮动进化史

　　新建BFC

　　该方法的原理是：父元素在新建一个BFC时，其高度计算时会把浮动子元素的包进来。

以上就是关于“css中父元素高度塌陷怎么解决”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。