html - float 离开不适用？

Question

我似乎无法将图像向左浮动？不明白为什么？

我应用了一个包含 float: left 的 align-left 类。

在线版本 - https://www.workbooks.com/salesforce-alternative (查看标题“高客户满意度”下方的评论网格)。

代码:

<section class="bluesection card__content__headings">
    <img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" height="395" src="/sites/default/files/2017-03/Reviews-6.png" width="400" />
    <h2 style="height: 400px;"></h2>
    <p></p>
</section>

CSS:

.align-left {
    float: left;
}

.bluesection {
    background-color:#ecf0f2;
    padding: 50px 100px 50px 100px;
}

Answer 1

试试这段代码:

<section class="bluesection card__content__headings">
    <h2 class="heading--two inline-block__heading" style="margin: 0px 0px 20px; text-align:center;">High customer satisfaction ratings</h2>
    <img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" src="/sites/default/files/2017-03/Reviews-6.png" width="400" height="395">

    <p class="inline-block__copy">With our world class software, our CRM expertise and proven implementation best practices, we are a genuine partner you can rely on to accompany you on your CRM journey - helping you transform your business and drive ongoing success.</p>

    <p class="inline-block__copy">But don't just take our word for it. Over 268 independent customers have reviewed Workbooks on G2 Crowd where Workbooks consistently scores above Salesforce in satisfaction and richness of functionality.</p>

    <p class="inline-block__copy">The G2 Crowd Report compare Workbooks to its competitors based on independent user reviews. Workbooks is rated higher than Salesforce in most categories.</p>
    <p style="clear:both;"></p>
</section>

如您所见，我更改了 img在 h2 之后, 我添加了一个 p与 clear:both样式到section里面的末尾.我还添加和删除了一些 CSS 样式以获得漂亮的外观。