一种奇怪的css定义导致div浮动无法清除(高手勿拍请指点)

zrwlc2008

浏览: 45417 次
性别:
来自: 柳州

最近访客更多访客>>

akacd

wolf521hf

lzzhong_9910

RunningSnail90

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

DIV+CSS

今天在修改公司网站一个页面的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的样子：