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

最新推荐文章于 2021-06-10 08:51:28 发布
最新推荐文章于 2021-06-10 08:51:28 发布
阅读量144 收藏
点赞数
分类专栏： DIV+CSS 文章标签： xhtml

 

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

 

   

 

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

zrwlc2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css清除浮动无效,CSS清除浮动方法总结
weixin_36002897的博客
08-03 1203
清除浮动的原因假设一个 div 内部有个浮动的 div，当内部 div 的高度要比外层的父级 div 高度大时，将会导致父级 div 高度无法随着内部 div 的高度自适应，这是由于浮动元素已经脱离了正常文档流，因此无法对父级元素产生影响。举例如下：复制代码代码如下:#a {width: 100px;border: 1px solid #ccc;}#b {height: 50px;float: l...
div清除浮动css样式代码分享(4种方法)
09-25
清除浮动这个问题，做前端的应该再熟悉不过了，下面介绍4种方法给大家参考
关于解决清除浮动的五大方法
要优秀！
03-07 309
1、  直接父级定义heght（不推荐使用）2、  结尾处加空div标签clear:both3、  父级div定义overflow:hidden，也就是开启BFC注：IE6不支持BFC，使用zoom:1,这是开启HasLayout模式，其它浏览器不支持4、  父级div定义伪类after       解决步骤： 1、伪元素在外容器最后增加内容,伪元素现在只能添加文字和图片 2、在最后添加字符"....
关于清除浮动的五种方法
weixin_39150852的博客
09-19 888
清除浮动的本质：为了解决父级元素印子级浮动引起内部高度为0的问题。 方式1:额外标签法（w3c推荐的方法）： 在最后一个浮动标签后，新添加一个标签 优点：通俗易懂，书写方便。 缺点：添加许多无意义的标签，结构化较差。 .clear{ 　　　clear:both; } 方式2:父级添加overflow属性方法 .father{ 　　　overflow:hidden;overfl...
详解清除浮动的多种方法
完善飞跃
03-06 3011
有段时间不写文章了, 以后正确不间断. 清除浮动, 这一篇文章足矣. #浮动让我们既爱又恨爱, 有了浮动我们可以更加方便的布局.恨, 有了浮动他也带来了一些副作用, 特别是在IE67上(现在几乎已经销声匿迹了).为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动.清除浮动的方式有很多, 只要我们把浮动的原理搞明白了, 清除浮动也是非常好理解的.正所谓万变不离其宗有如下
DIV+CSS 清除浮动常用方法总结
12-13
DIV+CSS 清除浮动是页面布局中常见的问题，相信各位高手也都有自己的方法，今天在这里对常见的几种方法进行总结（PS：谈不上是原创，这里是我自己做的归纳总结，也是我自己内化的过程），希望对您能够有所帮助。...
DIV+CSS垂直居中一个浮动元素
09-25
对于页面上的块级元素，只须定宽及设置margin:auto 0;即可在垂直上居中，但对于浮动的元素垂直居中是无效的。那么我们如何来处理这个问题呢，今天我们来探讨下。
CSS清除浮动
qq_44848423的博客
01-08 55
什么是清除浮动？     在非 IE 浏览器（如 Chrome）下，当容器的高度为auto，且容器的内容中有浮动（即CSS配置有float:left | right）的元素，在这种情况下，容器的高度不会自动伸长以适应内容的高度，所以里面的内容溢出到容器外面而影响（甚至破坏）布局，这个现象称为浮动溢出。     为了避免这个现象的发生，消除其带来的负面影响而进行的一些CSS处理，称为清除浮动。 浮动带来的问题 1、背景无法显示
清除浮动的四种方式及其原理理解
weixin_34072857的博客
10-18 3205
本文介绍了四种清除浮动的方法，并尝试解释其原理。在理解了各种清除浮动的原理之后，你会发现，很多清除浮动的方法本质上其实是一样的。掌握这些原理，相信你可以根据场景和需求，灵活运用原则发展出不同的清除浮动的方法，而不再死记或拘泥于文中提到的方法。 一、为什么要清除浮动 在讲清除浮动的方法之前，我们先来了解一下为什么要清除浮动，清除浮动的目的是什么，即，要解决什么样的问题。来看一个浮动的例子(略去了文字...
【HTML】解决DIV消除浮动问题(clear)
Alan的博客
10-19 3535
知识点: 清除（clear）的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开，相当于这个元素独立成一行，其它元素不管宽度大小，都不能和这个元素并排显示。如果是clear:right；就相当于这个元素右边的内容会被排除开，但是左边的不会，仍然可以在同一行显示。 1.在一个大盒子里面放两个浮动的小盒子，这种情况大盒子会认为自己里面没内...
伪元素选择和使用其清除浮动不生效问题
qq_25349323的博客
04-13 2061
今天在使用伪元素清除浮动时遇到了问题。 #container::after { clear:both; } 原本直接使用上面这个代码，发现清除不了浮动，使用谷歌浏览器检查元素发现根本检测不到after元素。 后来经过仔细与css手册案例对比并百度问题，发现使用after伪元素必须设置content属性，哪怕设置为空字符串也行，这样才能被浏览器检测到。 但是设置了content属性确实...
三种方法消除浮动带来的影响
此博客停止维护和更新，已转移https://github.com/ilvseyinfu/blog
08-29 1221
.container{ border:1px solid red; /*overflow: hidden;*/ /* 所以，这是消除浮动的第二种方法 给包含浮动元素的父标签添加css属性 overflow:auto; 下面我们来回顾下overflow这个属性： overflow这个属性规定内容溢出元素框时发生的事情 scroll：内容会
如何清除浮动
blueberry_liang的博客
05-09 1870
如何清除浮动： 父元素中添加一个属性 overflow:hidden 添加额外标签，并在标签中使用clear:both 给浮动元素父级设置高度 使用伪元素（必须是块级元素上使用） clearfix:after { content: ''; height: 0; display: block; clear: both; overflow: hidden; vi...
清除浮动的几种解决方式？
m0_56232007的博客
06-10 164
定义 消除浮动元素之间的影响。 高度塌陷 父元素中所有的子元素都浮动后，父元素没有设置高度，则高度为0。 在标准文档流中，父元素的高度默认是由内容的高度撑开的。也就是说，子元素的最大高度就是父元素的高度。但是当子元素都浮动后，子元素就脱离了标准文档流，无法撑开父盒子，对于父盒子来说，它里面没有标准文档流的内容，则导致它没有高度。 解决方法 1.添加高度（不推荐） 原因：在网页中，父元素一般不设置高度，而是由内容去撑开高度，如果设置了高度，可能会出现底部有大片的留白或者内容溢出。 2.父元素设置浮动（不推荐）
CSS 浮动 和 清除浮动
华夏天骄
05-23 160
CSS 浮动和清除浮动 浮动 float 块级元素配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。 常规布局使用的是标准流，浮动可以达到标准流做不到的效果。 通过浮动可以让块级元素在一行显示，以及达到漂浮层叠的效果。 标准流：盒子无论多宽都会各占整行位置。若父盒子没有定义高度，则直接撑开父盒子 浮动：盒子浮了起来，空白的地方不在占据。若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。 浮动的两个特点： 浮动的元素可以向左向右浮动，直到它的外边框碰到父元素的外边框或另一个浮动框的边框
关于CSS中浮动引发的特殊情况，“大坑”
qq_42698326的博客
02-15 366
浮动引发的特殊情况 一、换行显示 1、当父元素显示不下所有浮动元素时，显示不下的后面的元素会换行显示 <!doctype html> <html > <head> <title></title> <meta charset="UTF-8"> <style> div{width:200px;hei...
CSS 浮动和清除浮动的3种方法
路遇惊喜
12-08 7286
浮动的性质：脱标、贴边、字围、收缩。
html div元素浮动,CSS实现元素浮动和清除浮动的方法
最新发布
05-30
浮动是指让元素向左或向右移动，直到它的外边缘碰到包含它的容器或其他浮动元素的边缘为止。实现元素浮动可以使用CSS中的float属性，例如： ```CSS .float-left { float: left; /*元素向左浮动*/ } .float-right { float: right; /*元素向右浮动*/ } ``` 要清除浮动，可以使用clear属性，它能够清除浮动元素对后面元素的影响。例如： ```CSS .clearfix::after { content: ""; display: table; clear: both; /*清除浮动*/ } ``` 在这个例子中，使用了一个clearfix类来清除浮动，而::after伪元素用来创建一个空元素，clear:both则是用来清除浮动的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值