解决块级元素浮动时高度坍塌

最新推荐文章于 2024-07-20 18:10:58 发布

luyang92112

最新推荐文章于 2024-07-20 18:10:58 发布

阅读量114

点赞数

文章标签： html

本文链接：https://blog.csdn.net/s172292112/article/details/127191697

版权

多个块级元素需要横向排列时，使用float：left/right；使其浮动
当盒子开始浮动时，会出现高度坍塌的问题
此时只需要

.clearfix::after{
    content:"";
    display: block;
    clear: both;
}

例如一个导航因为浮动出现问题

 <ul class="top">
        <li><a>首页</a></li>
        <li><a>分类</a></li>
        <li><a>家具</a></li>
        <li><a>酷虎</a></li>
        <li><a>我的</a></li>
<ul>

 <ul class="top clearfix">
        <li><a>首页</a></li>
        <li><a>分类</a></li>
        <li><a>家具</a></li>
        <li><a>酷虎</a></li>
        <li><a>我的</a></li>
<ul>