Question: If this good practice?

```
<div>
    <div style="float:left;">
        text a
    </div>
    <div style="float:right;">
        text b
    </div>
    <div style="clear:both;"></div>
</div>
<div>
    text c
</div>

```

I've had cross-browser complications applying margins to the div containing "text c" even when I apply "clear:both" to that div. The cleanest way I've been able to consistently apply margins to elements immediately after floating elements is to apply that "break" div whose job is nothing more than to break the float and reset the line for the next element. Is this good practice?

Answer: 
I have been seeing this solution around a lot lately:

```
/* Clearing */
.clear:before,
.clear:after,
[class*="content"]:before,
[class*="content"]:after,
[class*="site"]:before,
[class*="site"]:after {
    content: '';
    display: table;
}

.clear:after,
[class*="content"]:after,
[class*="site"]:after {
    clear: both;
}

```

In your example, you would apply this to the parent div that you would want to be cleared:

```
<div class="clear">
    <div style="float:left;">
        text a
    </div>
    <div style="float:right;">
        text b
    </div>

</div>
<div>
    text c
</div>

```
The best solution to this problem is to apply `overflow: auto;` to the first `div`. That way, you don't need a special clearing element, and the container will automatically expand to fit the floated contents.