<div class="clear"></div>

最新推荐文章于 2021-07-03 12:11:40 发布
最新推荐文章于 2021-07-03 12:11:40 发布
阅读量936 收藏
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haojie5/article/details/8149772
版权 
.clear{ clear:both; height:0px; margin:0; padding:0; width:0; border:none; overflow:hidden; }

haojie5
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV 再论清除浮动的空方法
12-29
CSS 使用浮动会造成布局的混乱，通常清除浮动的方法是，利用一个如下样式的空 Div： <div class=clear></div> .clear{clear:both;} 更为优良的 CSS 代码是： .clear:after{content:.;display:block;height:0;clear:both;visibility:hidden;} .clear{zoom:1;} 这个方法目前已经广泛使用，淘宝、口碑，都是这种用法。通过 after 伪类 :after 和 针对 IE6 的独立 CSS Hack 来实现，完全兼容主流浏览器。 当然，这在通过 CSS 在元素之后追
DIV设置 float以后使下一个DIV另起一行的方法
12-13
今天在做一个网页的项目，例如：  复制代码代码如下:<div runat=”server” class=”export”>请不要直接打开此页面</div> <button class=”Btn” onclick=”[removed] location.href = ‘Default2.aspx'”>返回</button> 这是在CSS中的.export下加入float:left以后会使随后跟上的BUTTON标签跟在DIV后面，这是就须在两者之间加入一个CLASS为clear（可以自己起名字）的DIV，如下图所示：  复制代码代码如下:<div runat=”server” class=”e
DIV滑动门代码
09-06
<style type="text/css"> body{ color: #000; font-family: "宋体", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 240px; margin: 0 auto; border-bottom:1px #C7C7CD solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:2px; } .nTab .TabTitle{ clear: both; height: 26px; overflow: hidden; } .nTab .TabTitle ul{ margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 60px; cursor: pointer; padding-top: 6px; padding-right: 0px; padding-left: 0px; padding-bottom: 7px; list-style-type: none; } .nTab .TabTitle .active{ background:url(images/finance_nc_080124_ws_001.gif) left -25px no-repeat;border-left:1px #C7C7CD solid;border-top:1px #C7C7CD solid;border-bottom:1px #fff solid;} .nTab .TabTitle .normal{ background:url(images/finance_nc_080124_ws_001.gif);border-top:1px #C7C7CD solid;border-bottom:1px #C7C7CD solid;} .nTab .TabContent{ width:auto;background:#fff; margin: 0px auto; padding:10px 0 0 0; border-right:1px #C7C7CD solid;border-left:1px #C7C7CD solid; } .none {display:none;} </style> <script type="text/javascript"> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++) { if (i == Num) { thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList[i].className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } </script> <!-- 选项卡开始 --> <div class="nTab"> <!-- 标题开始 --> <div class="TabTitle"> <ul id="myTab0"> <li class="active" onClick="nTabs(this,0);">预拔电杆</li> <li class="normal" onClick="nTabs(this,1);">预等电杆</li> <li class="normal" onClick="nTabs(this,2);">普拔电杆</li> <li class="normal" onClick="nTabs(this,3);">部预电杆</li> </ul> </div> <!-- 内容开始 --> <div class="TabContent"> <div id="myTab0_Content0"> 欢迎访问：<a href="http://www.alixixi.com" target="_blank">阿里西西WEB开发 </a></div> <div id="myTab0_Content1" class="none"><a href="http://www.alixixi.com">计源论坛 计源论坛</a></div> <div id="myTab0_Content2" class="none"><a href="http://www.alixixi.com">计源论坛22</a></div> <div id="myTab0_Content3" class="none"><a href="http://www.alixixi.com">计源论坛33</a></div> </div> </div> <!-- 选项卡结束 -->
学生网页制作
06-28
<!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=utf-8" /> <title>慕课网</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/js/myfocus-2.0.1.min.js"></script> <script type="text/javascript"> myFocus.set({ id:'demo', pattern:'mF_liquid'}); </script> </head> <body> <div id="top"> <div id="top_text"> <ul> <li><a href="#">联系我们</a></li> <li><a href="#">加入收藏</a></li> <li><a href="#">设为首页</a></li> </ul> </div> </div> <div id="middle"> <div id="logo"> <div id="logo_left"> <img src="images/logo.jpg" alt="" width="200" height="80" /> </div> <div id="logo_right"> <img src="images/tel.jpg" width="28" height="28" /> 24小时服务热线 <span>123-456-7890</span> </div> <br class="clear_float"> </div> <div id="nav"> <div id="nav_left"> <img src="images/nav_left.jpg" width="10" height="40" /> </div> <div id="nav_middle"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于幕课</a></li> <li><a href="#">新闻动态</a></li> <li><a href="#">课程中心</a></li> <li><a href="#">在线课程</a></li> <li><a href="#">人才招聘</a></li> </ul> <div id="gezi"> <form> <input type="text" /> </form> </div> </div> <div id="nav_right"> <img src="images/nav_right.jpg" width="10" height="40" /> </div> </div> <div id="demo" class="ad"> <div class="pic"> <ul> <li><a href="#"><img src="images/ad2.jpg" thumb="" alt="" text="详细描述2" /></a></li> <li><a href="#"><img src="images/ad3.jpg" thumb="" alt="" text="详细描述3" /></a></li> <li><a href="#"><img src="images/ad4.jpg" thumb="" alt="" text="详细描述4" /></a></li> <li><a href="#"><img src="images/ad3.jpg" thumb="" alt="" text="详细描述5" /></a></li> </ul> </div>
在HTML中清楚浮动！ 使用<DIV CLASS="clear"/>
thebesttome的专栏
10-18 6048
div class="clear"> 这里的clear是样式名。 样式写在CSS文件中从名称来看估计你的样式为：.clear {clear:both; }clear:both; 作用： 该属性的值指出了不允许有浮动对象的边。 这个属性是用来控制float属性在文档流的物理位置
＜div class=“clear“＞＜/div＞
滕青山博客
03-11 698
不清除浮动的话，父div高度就不会随内容而增加。
【HTML】解决DIV消除浮动问题(clear)
Alan的博客
10-19 3551
知识点: 清除（clear）的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开，相当于这个元素独立成一行，其它元素不管宽度大小，都不能和这个元素并排显示。如果是clear:right；就相当于这个元素右边的内容会被排除开，但是左边的不会，仍然可以在同一行显示。 1.在一个大盒子里面放两个浮动的小盒子，这种情况大盒子会认为自己里面没内...
Div布局时注意使用clear属性
0溺水的鱼O的专栏
06-24 6635
v/:* {behavior:url(#default#VML);}o/:* {behavior:url(#default#VML);}w/:* {behavior:url(#default#VML);}.shape {behavior:url(#default#VML);} 800x600 Normal 0
让多个div在同一行显示的样式及html代码
12-03
以下为css样式： ...–width指定每个div占据的宽度–></pre>.custom_div{height: 23px;width: 50px;line-height: 23px;float: left;} <pre></pre> 以下为html代码：[code]<pre name=”code” class=”html”
DIV布局之道四：clear:both清除DIV两侧浮动详解
xyjikl
06-30 6059
我们要实现图中表格实现的效果，使用DIV+CSS该如何实现呢？ 众所周知，要实现如上效果，我们写一个两行两列的表格，使得表格第二行两个单元格合并即可实现上图效果，可以使用如下代码实现： XML/HTML Code复制内容到剪贴板 table width="303" height="151" border="1" align="center" cellpadding
<div style=\'clear:both\'></div>
IT技术宅-北方的刀郎
03-21 1459
CSS手册上是这样说明的：该属性的值指出了元素两边不允许有浮动对象这个属性是用来控制float属性在文档流中的物理位置的。#main {background-color: #3399CC;width: 600px;padding: 20px;}#sidebar {background-color: #FF6600;     float: left;width: 130px;}#container
div+css布局漫谈
weixin_34117522的博客
03-25 137
1.CSS布局常用的方法：float : none | left | right 取值：none : 默认值。对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工作的，看个一行两列的例子 xhtml: &lt;div id="warp"&gt; &lt;div id="column1"&gt;这里是第一列&lt;/div&gt; &lt;di...
7.CSS3--选择器(2)
weixin_44754351的博客
07-24 132
一. first-of-type “:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 演示：通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。 <div class="wrapper"> <div>我是一个块元素，我是.wrapper的第一个子元素</div> &l
html id clear,【HTML】解决DIV消除浮动问题(clear)
weixin_35710941的博客
07-03 133
知识点:清除(clear)的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开，相当于这个元素独立成一行，其它元素不管宽度大小，都不能和这个元素并排显示。如果是clear:right；就相当于这个元素右边的内容会被排除开，但是左边的不会，仍然可以在同一行显示。1.在一个大盒子里面放两个浮动的小盒子，这种情况大盒子会认为自己里面没内容，而恰...
div class = wrapper
chouju7477的博客
05-22 3959
<div class="wrapper"> 有的网站 使用一个 class属性为"wrapper"的div 包裹整个页面内容 然后配合CSS margin: 0 auto;width: 1024px; 达到 两边留空,页面主体居中 的效果 ...
<!-- 结算模块 --> <div class="cart-floatbar"> <div class="select-all"> <input type="checkbox" name="" id="d" class="checkall">全选 </div> <div class="operation"> <a href="javascript:;" class="remove-batch"> 删除选中的商品</a> <a href="javascript:;" class="clear-all">清理购物车</a> </div> <div class="toolbar-right"> <div class="amount-sum">已经选1件商品</div> <div class="price-sum">总价： </div> <div class="btn-area">去结算</div> </div> </div>帮我改成组件
最新发布
06-12
" class="clear-all">清理购物车</a> </div> <div class="toolbar-right"> <div class="amount-sum">已经选{{ selectedCount }}件商品</div> <div class="price-sum">总价： {{ totalPrice }}...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值