为何CSS的float左、右浮动属性无法正常生效？

你遇到的核心问题是：Flex容器内的子元素会忽略float属性，所以你设置的float: right/float: left完全不起作用。下面直接给出两种可行的解决方案：

方案一：调整HTML结构（最简单） #

Flex容器默认从左到右排列子元素，把图片放到文字容器的后面，就能自然实现文字左、图片右的布局：

<div class="say-hello">
    <div class="say-hello-text">
        <h2>Say Hello</h2>
        <p>In the mood for something sweet? We'd love to make your next event special with something Positively Delicious. Whether you're looking for a classic birthday cake or a unique cupcake assortment, we've got you covered.</p>
        <div class="say-hello-button">
            <a class="button" href="#">Contact us</a>
        </div>
    </div>
    <img src="images/say-hello.jpg" alt="Person placing macarons on top of cake">
</div>

方案二：用CSS order 属性调整顺序（无需修改HTML） #

如果不想改动HTML结构，通过order属性控制Flex子元素的排列顺序即可，同时移除无效的float属性，还需要纠正padding: none的错误写法（CSS里没有该属性值，应该用padding: 0）：

.say-hello {
    width: 80%;
    max-width: 100%;
    height: 100%;
    padding: 30px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 8px;
}
.say-hello img {
    object-fit: cover;
    width: 50%;
    border: none;
    padding: 0; /* 修正padding: none的错误 */
    margin-left: 0;
    margin-right: 0;
    order: 2; /* 让图片排在第二位 */
}
.say-hello-text {
    text-align: center;
    align-self: center;
    width: 40%;
    padding-right: 4%;
    order: 1; /* 让文字容器排在第一位 */
}

内容的提问来源于stack exchange，提问作者Filipe De sousa