一种奇怪的css定义导致div浮动无法清除(高手勿拍请指点)
?
今天在修改公司网站一个页面的css，发现一个div的浮动状态始终无法清除，代码如下，请注意加注释的地方，写法很奇怪：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>?.l3 div.titlex{float:left;width:200px;text-align:right;height:29px;padding-top:3px;font-weight:bold;}/* 请看这里 */.l3 div {float:left;width:380px;height:32px;padding-top:3px;}</style></head><body>?<div style="width:600px;border:solid 1px #FF0000;"> <!-- 左浮动了 --> ? <div value=""/></div> <!-- 想清除浮动没有成功 --> <div style="clear:both"></div></div></body></html>?
?页面效果如下，那条红色的线，就是由于子元素的浮动没清除而悲催地“压榨”成一条线的父div：
?
???? 
??
?
?研究了好一阵，发现代码改成这样的时候就好了：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>.l3 div.titlex{float:left;width:200px;text-align:right;height:29px;padding-top:3px;font-weight:bold;}/* 改了这里 */?.l3 div.data{float:left;width:380px;height:32px;padding-top:3px;}</style></head><body><div style="width:600px;border:solid 1px #FF0000;"> <div value=""/></div> <div style="clear:both"></div></div></body></html>?
?? ok的样子：
?
??? 
?
所以原来那样的定义是一种很坑爹的写法（不是我写的呀，是原来不知道谁写的！
） 只知道是一种父元素的定义和子元素定义相冲突了，但是不知道怎么具体来解释，请路过高手指点一二！