HTML+CSS爬坑之路-高度坍塌

高度坍塌

在刚接触HTML+CSS时，是否经常遇到这样的问题：咦，我的div高度怎么只有这么一点？这个盒子的内容怎么穿插在上个盒子的内容里面的？

---

这些问题大多数都是因为浮动等产生的了高度坍塌！

---

高度坍塌：当对子元素使用`float`浮动后，父元素的高度将不能够自适应增加，情况如下：

案例代码：

html:

<div class="farther">farther 常规流
 	<div class="son1">son1 常规流</div>
    <div class="son2">son2 左浮动</div>
    <div class="son3">son3 右浮动</div>
</div>

css:

.farther{ border: solid red;padding: 1px;width: 300px;}
.farther div{height: 100px; width: 100px;}
.son1{border: solid gold;}
.son2{border: solid rgb(0, 255, 76);float: left;}
.son3{border: solid rgb(4, 0, 255);float: right;}

案例代码效果

在页面中的效果为：

如上图，父元素盒子并没有将所有的子元素包含起来，这样会造成我们对后文的处理产生许多的麻烦，而我们所需要的效果为，父盒子高度能将所有的元素包含，
所想要的效果图：

解决方法：

方法一： 固定父元素的高度

将父元素的高度固定为所需要的高度，不能小于元素里面内容的最大高度
css代码：

.farther{height: 300px;}

效果为：

注意：该方法不能自适应子元素的高度，当子元素内容高度增加时，需要手动改变父元素的高度，该方法基本不使用

方法二：clear清除浮动

对子元素采用clear: both，具体方法为：1.在子元素最后再添加一个空的div；2.在该div（即最后一个子元素）的css中写入clear:both。即可实现父元素高度自适应

html代码：

<div class="farther">farther 常规流
   	<div class="son1">son1 常规流</div>
    <div class="son2">son2 左浮动</div>
    <div class="son3">son3 右浮动</div>
    <div class="son4"></div>
</div>

css代码：

div.son4{
    clear: both;
    width: 0;
    height: 0;
}

提醒：当最后一个子元素为常规流时，可以不用添加空的div

方法三：overflow 进行撑开

对父元素使用 overflow: hidden;，父元素的高度被高度最大的子级标签撑开
css代码：

.farther{overflow: hidden;}

方法二与方法三 都将很好的实现为所想要的高度适应效果