为什么div文本不会在块周围浮动？

Question

我很迷路....最简单的任务，它根本不起作用，我尝试了一切 为什么在此codepen示例中，带有class float的div块根本不在文本内部浮动，我的意思是为什么div周围没有文本浮动？ 我尝试了很多变种

https://codepen.io/antongrekov/pen/EBMbbY

尝试浮动：保留在 p 选项卡上，仅在块上浮动，在两个浮动上，清除元素，在容器上浮动。...

.wrap
    p lorem lorem ads AsD ADOPF JDS[ FOPSAF S FSD SAD DS DS S DDSDS] lorem lorem ads AsD ADOPF JDS[ FOPSAF S FSD SAD DS DS S DDSDS] lorem lorem ads AsD ADOPF JDS[ FOPSAF S FSD SAD DS DS S DDSDS] lorem lorem ads AsD ADOPF JDS[ FOPSAF S FSD SAD DS DS S DDSDS] lorem lorem ads AsD ADOPF JDS[ FOPSAF S FSD SAD DS DS S DDSDS] lorem lorem ads AsD ADOPF JDS[ FOPSAF S FSD SAD DS DS S DDSDS]
    .float
    .clear

.wrap
    background: #333
    border: 3px solid red
    width: 30%
    p
        float: left


    .float
        width: 50px
        height: 50px
        border: 5px solid green
        float: left
    .clear
        clear: both