Let's have a look at a couple of these in order to see the effect creating a new BFC.
In the example below, we have a floated element inside a <div>
with a border applied. The content of that <div>
has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the <div>
now runs through the float. As explained in the guide to in-flow and out of flow elements, the float has been taken out of flow so the background and border of the div only contain the content and not the float.
Creating a new BFC would contain the float. A typical way to do this in the past has been to set overflow: auto
or set other values than the initial value of overflow: visible
.
Setting overflow: auto
created a new BFC containing the float. Our <div>
now becomes a mini-layout inside our layout. Any child element will be contained inside it.
The problem with using overflow
to create a new BFC is that the overflow
property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow
for this purpose. If you do this, it would be a good idea to comment the code to explain.