清除DIV浮动-使用:after

浮动

特点:不需要另外加个清除DIV.

:after(伪对象)--设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。
CSS


.wrapfix:after {    content: ".";     display: block;    height: 0;     clear: both;     visibility: hidden;} 

设display:block;应用到:after 元素,因为display的默认值是"inline", 不能收到clear的特性,同时将清除容器的高度设为零,height:0;,可见度为隐藏.这是没有清除过浮动的.非Ie 浏览器看不到wrap的背景和边框.

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>清除浮动--使用:after--Clearing</title> <style type="text/css"> <!-- *{ padding: 0; margin: 0; } body{ font: 85%/140% Arial, Helvetica, sans-serif; padding: 10px 0; text-align: center; } .wrap { border: 1px solid #999999; margin: 0 auto; width: 762px; w\idth: 760px; background: #ECECEC; text-align: left; } .wrapfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } #sidel{ float: left; width: 160px; } #sider{ float: right; width: 600px; background: #F9F9F9; } p,pre,em{ padding: 10px; } --> </style></head><body> <div class="wrap"> <div id="sider"> <p>清除浮动--使用:after </p> <em>这是没有清除过浮动的.非Ie浏览器看不到wrap的背景和边框.</em> <p> 特点:不需要另外加个清除DIV.</p> <p>:after(伪对象)--设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie浏览器支持,所以并不影响到IE/WIN浏览器。</p> <p>CSS</p> <pre>#wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} </pre><p>设display:block;应用到:after 元素,因为display的默认值是"inline",不能收到clear的特性,同时将清除容器的高度设为零,height: 0;,可见度为隐藏</p></div> <div id="sidel"><p>left</p> <p> </p> </div> </div></body></html>

  [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

这是清除过浮动的.非Ie 浏览器看到wrap的背景和边框.

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>清除浮动--使用:after--Clearing</title> <style type="text/css"> <!-- *{ padding: 0; margin: 0; } body{ font: 85%/140% Arial, Helvetica, sans-serif; padding: 10px 0; text-align: center; } .wrap { border: 1px solid #999999; margin: 0 auto; width: 762px; w\idth: 760px; background: #ECECEC; text-align: left; } .wrapfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } #sidel{ float: left; width: 160px; } #sider{ float: right; width: 600px; background: #F9F9F9; } p,pre{ padding: 10px; } --> </style></head><body> <div class="wrap wrapfix"> <div id="sider"> <p>清除浮动--使用:after </p> <p> 特点:不需要另外加个清除DIV.</p> <p><em>这是清除过浮动的.非Ie 浏览器看到wrap的背景和边框.</em></p> <p>:after(伪对象)--设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie浏览器支持,所以并不影响到IE/WIN浏览器。</p> <p>CSS</p> <pre>#wrap:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} </pre><p>设display:block;应用到:after 元素,因为display的默认值是"inline",不能收到clear的特性,同时将清除容器的高度设为零,height: 0;,可见度为隐藏</p></div> <div id="sidel"><p>left</p> <p> </p> </div> </div></body></html>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 

 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

为了适应各个浏览器,我们还需要加上以下代码.

.wrapfix {display: inline-table;}/* Hides from IE-mac \*/* html .wrapfix {height: 1%;}.wrapfix {display: block;}/* End hide from IE-mac */

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索对象
, display
, 浏览器
, 浮动框
, 浮动
, 隐藏浮动
, 操作非IE
, height
, @after
, 清除浮动
, 清除容器
, after
, 清除默认值
after()
,以便于您获取更多的相关知识。

时间: 2024-10-30 21:04:42

清除DIV浮动-使用:after的相关文章

css 清除div浮动方法

三.使用after伪对象清楚浮动 该方法只适用于非IE浏览器.具体写法可参照以下示例.使用中需注意以下几点.一.该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素:二.content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为".",但我发现为空亦是可以的. <style type="text/css"> <!–     *{margin:0;padding:0;}   

总结六种清除CSS浮动的方法

1.父元素定义height <span style="font-family:Microsoft YaHei;"><style>    .wrapper {        width:600px;        height:200px;/* 解决代码 */        background:red;    }    .left {        float:left;        width:30%;        height:100px;      

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="Conte

jQuery实现div浮动层跟随页面滚动效果

 这篇文章主要介绍了jQuery实现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"

html-HTML关于CSS+DIV浮动的一个疑问

问题描述 HTML关于CSS+DIV浮动的一个疑问 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style> #div1 { width:400px; height:300px; backgroun

javascript实现div浮动在网页最顶上并带关闭按钮效果实例_javascript技巧

复制代码 代码如下: <html> <head> <title>javascript实现div浮动在网页最顶上并带关闭按钮效果实例</title> <style type="text/css"> <!-- body { margin: 0px;padding: 0px;text-align: center;} TD {FONT-SIZE: 12px; COLOR: #333;} #toubiao {BORDER-BOTT

jquery Div隐藏 DIV浮动在iframe上时隐藏失效

问题描述 jquery Div隐藏 DIV浮动在iframe上时隐藏失效 <!DOCTYPE html><html><head><meta http-equiv=""Content-Type"" content=""text/html; charset=utf-8"" /><title>无标题文档</title><script src="&

请教各位大人:困扰2天的问题 有2个div浮动层一个半透明,一个透明的.一个img 图片拖到透明div中

问题描述 功能是这样的..有2个div一个是大的浮动层在下边是半透明的.width500heiht400还一个是小的div浮动层透明的作为用户的像框width150heiht200小div在大div的中间位置,但是透明的.还有一张img用户的照片可以拖动的照片,用户拖动照片把想要的部位,例如:上身位置拖到小div里按提交后台自动截图小div像框里的照片..现在的问题是:我没有办法让小div像框在大div里全透明,因为大div里设的是半透明,那照片后台截取下来的照片也是半透明的效果.不能作用户的形

层怎么才能紧跟着上面的DIV浮动啊

问题描述 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type&qu