css浮动问题在自学求告知🙏

Question

我用这个清除浮动不管用

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /* 为 IE6、IE7浏览器设置的清除浮动 */
    *zoom: 1;
} 

但是我用

overflow:hidden

这个却可以，怎么让上面第一个代码清除浮动有效果。
这个是html源代码

  

        

            
< img src="img/tupian1.png" alt="">
                
hink PHP 5.0 博客系统实战项目演练
                高级• 1125人在学习
            
            
< img src="img/tupian1.png" alt="">
                
hink PHP 5.0 博客系统实战项目演练
                高级• 1125人在学习
            
            
< img src="img/tupian1.png" alt="">
                
hink PHP 5.0 博客系统实战项目演练
                高级• 1125人在学习
            
            
< img src="img/tupian1.png" alt="">
                
hink PHP 5.0 博客系统实战项目演练
                高级• 1125人在学习
            
            
< img src="img/tupian1.png" alt="">
                
hink PHP 5.0 博客系统实战项目演练
                高级• 1125人在学习
            
        
    
    


    

这个是css源代码

* {
    padding: 0;
    margin: 0;
}

.w {
    width: 1200px;
    margin: auto;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    background-color: #f3f5f7;
}

/* 清除浮动 */
.clearfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /* 为 IE6、IE7浏览器设置的清除浮动 */
    *zoom: 1;
}


.yuanma ul {
    float: left;
}

.yuanma img {
    width: 100%;
}

.yuanma ul {
    width: 1225px;
}

.yuanma ul li {
    float: left;
    width: 228px;
    height: 270px;
    margin-right: 15px;
    background-color: #fff;
}

.yuanma h4 {
    float: left;
    margin: 15px 20px;
    font-size: 14px;
    font-weight: 400;
}

.yuanma ul li span {
    float: left;
    margin-left: 20px;
    font-size: 12px;
    color: #666;
}

.yuanma ul li span a {
    float: left;
    color: coral;
    padding-right: 5px;
}

.dibu {
    height: 300px;
    background-color: red;
}

我是代码哪里出错了吗，希望可以帮我指出来

Answer 1

你要的是这种效果？