一套完整代码解析 高度坍塌的解决方案（最全）
目錄
一：方案總結(jié)
二：代碼解析
原因引入
代碼塊 可直接使用調(diào)試（帶解析）
圖示：
一：方案總結(jié)
??? ??????????? /* 方案1：父元素自設(shè)高度 */
?? ??? ??? ??? ?/* height: 100px; */
?? ??? ??? ??? ?/* 方案2：父元素觸發(fā)BFC結(jié)界 */
?? ??? ??? ??? ?/* overflow: hidden; */
????????????????<!-- 方案3：找一個(gè)空的div專門干清除浮動(dòng)的事情 -->
?? ??? ??? ???? <!-- <div></div> -->
??????????????? /* 方案4：讓最后一個(gè)子元素來清除浮動(dòng)影響 */
?? ??? ??? ??? ?/* 我后悔了，我不浮動(dòng)了，我來清除哥哥們浮動(dòng)對父親產(chǎn)生的影響 */
?? ??? ??? ??? ?/* 清除左右兩個(gè)方向子元素浮動(dòng)對父元素產(chǎn)生的影響 */
?? ??? ??? ??? ?/* clear: both; */
?? ??? ??? ??? ?/* 方案5：讓父級(jí)也浮動(dòng)，成為和子級(jí)同一層的元素 */
?? ??? ??? ??? ?/* float: left; */
??????????????? /*方案6 使用after偽元素結(jié)合clear屬性解決高度塌陷*/
??????????????? .fu::after{
??????????????????? content:"";/*在浮動(dòng)元素的父元素內(nèi)容區(qū)最后加上內(nèi)容*/
??????????????????? display:block;/*默認(rèn)情況下after所添加的內(nèi)容為行內(nèi)元素*/
??????????? ????????clear:both;/*清除浮動(dòng)元素影響*/
??????????????? }
二：代碼解析
原因引入
進(jìn)行頁面布局時(shí)，為了能夠達(dá)到自適應(yīng)，通常高度是不會(huì)進(jìn)行固定設(shè)置的，而使用float進(jìn)行元素的浮動(dòng)后，由于沒有內(nèi)容的高度，所以會(huì)發(fā)生父元素的高度塌陷問題，為了解決此類問題這里給出了幾種解決方法。
代碼塊 可直接使用調(diào)試（帶解析）
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>父級(jí)高度坍塌問題解決</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?/* 1.給父元素設(shè)置邊框 */
?? ??? ??? ?.fu {
?? ??? ??? ??? ?border: 5px solid #000;
?? ??? ??? ??? ?/* 方案1：父元素自設(shè)高度 */
?? ??? ??? ??? ?/* height: 100px; */
?? ??? ??? ??? ?/* 方案2：父元素觸發(fā)BFC結(jié)界 */
?? ??? ??? ??? ?/* overflow: hidden; */
?? ??? ??? ??? ?/* 方案5：讓父級(jí)也浮動(dòng)，成為和子級(jí)同一層的元素 */
?? ??? ??? ??? ?/* float: left; */
?? ??? ??? ?}
?? ??? ??? ?/* 2.給父級(jí)下的所有div設(shè)置大小 */
?? ??? ??? ?.fu > div {
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ?}
?? ??? ??? ?/* 3.給5個(gè)兒子元素設(shè)置不同的背景色 */
?? ??? ??? ?.z1 {
?? ??? ??? ??? ?background-color: rgba(255,0,0,1);
?? ??? ??? ??? ?float: left;
?? ??? ??? ?}
?? ??? ??? ?.z2 {
?? ??? ??? ??? ?background-color: orange;
?? ??? ??? ??? ?float: left;
?? ??? ??? ?}
?? ??? ??? ?.z3 {
?? ??? ??? ??? ?background-color: yellow;
?? ??? ??? ??? ?float: right;
?? ??? ??? ?}
?? ??? ??? ?.z4 {
?? ??? ??? ??? ?background-color: green;
?? ??? ??? ??? ?float: left;
?? ??? ??? ?}
?? ??? ??? ?.z5 {
?? ??? ??? ??? ?background-color: cyan;
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?/* 方案4：讓最后一個(gè)子元素來清除浮動(dòng)影響 */
?? ??? ??? ??? ?/* 我后悔了，我不浮動(dòng)了，我來清除哥哥們浮動(dòng)對父親產(chǎn)生的影響 */
?? ??? ??? ??? ?/* 清除左右兩個(gè)方向子元素浮動(dòng)對父元素產(chǎn)生的影響 */
?? ??? ??? ??? ?/* clear: both; */
?? ??? ??? ?}
?? ??? ??? ?/* 給父元素最后生成一個(gè)空白子元素，變塊級(jí)，清除浮動(dòng)影響 */
?? ??? ??? ?.clearfix::after {
?? ??? ??? ??? ?content: ''; /* 在父級(jí)最后生成一個(gè)空白的新的子元素 */
?? ??? ??? ??? ?display: block;
?? ??? ??? ??? ?clear: both;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="fu clearfix">
?? ??? ??? ?<div class="z1"></div>
?? ??? ??? ?<div class="z2"></div>
?? ??? ??? ?<div class="z3"></div>
?? ??? ??? ?<div class="z4"></div>
?? ??? ??? ?<div class="z5"></div>
?? ??? ??? ?<!-- 方案3：找一個(gè)空的div專門干清除浮動(dòng)的事情 -->
?? ??? ??? ?<!-- <div></div> -->
?? ??? ?</div>
?? ?</body>
</html>
圖示：
解決前
?
解決后
?
總結(jié)
以上是生活随笔為你收集整理的一套完整代码解析 高度坍塌的解决方案（最全）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云骑士u盘装win8系统教程
- 下一篇： 5G应用大幕开启，四大领域迎全面机遇