<div class="bfc">
<div class="container">
    <div class="foo">
        <div class="bar">bar</div>
        foo
    </div>
</div>
</div>

<div class="bfc">
<div class="container bfc">
    <div class="foo bfc">
        <div class="bar">bar</div>
      foo
    </div>
</div>
</div>
        .foo {
            background-color: rgb(224, 206, 247);
            border: 5px solid rebeccapurple;
        }

        .bar {
            float: left;
            width: 200px;
            height: 150px;
            background-color: white;
            border:1px solid black;
            padding: 10px;
        }

        .container {
            margin: 100px;
        }
        .bfc {
            overflow: hidden;
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.