等效于CSS的IE显示：流根

Question

我目前有一些代码在使用此CSS属性display: flow-root的chrome中可以正常工作，但是在IE中失败，将其更改为block或flex并不能解决问题。

所以只想检查同一个属性的IE是否具有等效项。

Answer 1

您可以使用clearfix hack导致包装程序清除浮动的项目。

这里是https://codepen.io/rachelandrew/pen/RKgevX

的示例

您想要这样的东西吗？

CSS。

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

    .container {
        border: 2px solid #3bc9db;
        border-radius: 5px;
        background-color: #e3fafc;
        width: 400px;
        padding: 5px;
    }


    .item {
        height: 100px;
        width: 100px;
        background-color: #1098ad;
        border: 1px solid #0b7285;
        border-radius: 5px;
        float: left;
    }

    h2 {
        padding: 2em 0 0 0;
    }

    .wrapper {
        max-width: 600px;
        margin: 40px auto;
    }

HTML。

    <div class="wrapper">
    <div class="container container2">
        <div class="item"></div>
        xxxxxxxxxxxxxxxxxxxxxxxxxx
    </div>
</div>