今天在修改公司网站一个页面的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的样子:
所以原来那样的定义是一种很坑爹的写法(不是我写的呀,是原来不知道谁写的!
) 只知道是一种父元素的定义和子元素定义相冲突了,但是不知道怎么具体来解释,请路过高手指点一二!
- 大小: 32.9 KB
- 大小: 31 KB
分享到:
相关推荐
DIV+CSS布局:CSS浮动float属性详解 不解释
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
CSS3图片div浮动3D动画效果.rar
div+css清除浮动
div _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _cssdiv _css
div css练习
漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...
css模板 css div模板,一共10个模板
具体详细的阐述了css浮动如何解决和浮动产生的原因。
Css Div浮动叠加层效果(网易邮箱登陆效果). Css Div浮动叠加层效果(网易邮箱登陆效果).
div+css,web标准,div+css布局,div+css实例,div+css模板
css 简单例子 div css 简单例子 div css 简单例子 div
css中3种清除浮动方法css中3种清除浮动方法
div+css手册,比较不错呀!
DIVCSS布局:CSS浮动float属性详解
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
很好用的 div+css实现的两侧浮动广告JS代码.div+css 教程。
div+css div+css精通CSS
css + div 滑动弹出div效果,可自定义弹出效果。