<div class="w">
<div class="fl">
<ul>
<li>欢迎你! </li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的系统</li>
</ul>
</div>
</div>
一、父元素添加:overflow: auto;
自动检测子元素高度,父元素高度自适应;
二、伪元素清除浮动:
给父元素添加伪元素 ::after;
.w::after {
content: '';
clear: both;
/**块级元素会独占一行,清除浮动后会把父盒子高度撑开*/
display: block;
}
三、标签法:(跟伪元素清除法,原理是一样的都是用的clear:both)
<div class="w">
<div class="fl">
<ul>
<li>欢迎你! </li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的系统</li>
</ul>
</div>
<div class="fc"></div>
</div>
.fc{
clear: both;
}