場景：子元素浮動導致父元素塌陷影響后面布局

代碼

.father{

width: 100%;

background-color: yellowgreen;

}

.son{

width: 100px;

height: 150px;

background-color: red;

float: right;

}

<div class="father">父

<div class="son">子</div>

</div>

界面（綠色是文本撐起）

解決辦法：想要子元素撐起父元素，直接給父元素添加偽元素

.father::after {

content: "";

clear: both; /*清除浮動*/

display: block; /*確保該元素是一個塊級元素*/

}