.clearfix css doesnt render in DW Design View

Question

I have used the css .clearfix code in my site to enable two
divs to clear a floated element. It works fine in browsers like
IE6, IE7, FF, Safari, etc. But the clearfix code doesnt make the
divs clear when I am designing in Dreamweavers Design View. They do
not clear. I have to use <br style="clear:both;"/> after the
two divs to make them clear in Design View.
The problem is that actually adding <br
style="clear:both"/> after the two divs in DW renders the
.clearfix solution redundant as it has the same effect of clearing
the float.
Basically Im saying its a shame that the excellent .clearfix
code doesnt render in Desing View. Or does anyone know how to make
it render in Design View without using the <br style... code?
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */

Answer 1

Hi there, in case anybody comes across this issue again, I had the same prob, compounded by 'edge case' situations where the .clearfix class wasn't enough. A solution (not ideal, but it does solve the problem) can be found here:
http://forums.adobe.com/message/130568#130568
It involves using a float clearance CSS technique, and then adding markup to enforce clearance in Design Mode, as suggested by Billy - the differnce is that you also set line-height and height styles to 0px on the added markup. I know adding markup is hardly ideal, but I added an alt="PLACEHOLDER" attribute to my markup clearance div (or <br /> in Billy's case), so I could 1) search and replace it out it later and 2) generate a validation error so I definately wouldn't miss it.
-d