日期:2014-05-17  浏览次数:20738 次

一种奇怪的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 class="l3" style="width:600px;border:solid 1px #FF0000;">
     <!-- 左浮动了 --> 
?   <div class="titlex">广告标题语:</div>
   
   <!-- 然后上面的css也作用到这里 -->
  ?<div ><input type="text" 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 class="l3" style="width:600px;border:solid 1px #FF0000;">
     
    <div class="titlex">广告标题语:</div>

    <!-- 这里也加上了样式 -->
   ?<div class="data"><input type="text" value=""/></div>
 
     <div style="clear:both"></div>
</div>
</body>
</html>

?

?? ok的样子:

?

???

?

所以原来那样的定义是一种很坑爹的写法(不是我写的呀,是原来不知道谁写的! ) 只知道是一种父元素的定义和子元素定义相冲突了,但是不知道怎么具体来解释,请路过高手指点一二!