使用伪元素(:after)清除浮动元素
2015-01-05 12:17
756 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>清除浮动元素</title> <style> * {margin:0; padding:0; border:0;} #div1 {width:100%; height:auto; background-color:#F00; float:left;} #div2 {width:800px; margin:auto; background-color:#00F; margin-top:50px;} #div3 {width:100px; height:100px; background-color:#0F0; float:left; margin-left:150px;margin-top:150px; margin-bottom:100px;} #div2:after {display:block; height:0; content:""; clear:both;} </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> </body> </html>
#div1浮动,#div2不浮动,#div3浮动
如果不清除#div3的浮动,#div1可以包含#div3,但是,#div2的高度会为0px,就不能包含#div3。
一种方法是在#div2内部,#div3后面,加入类似这样一段代码“<div style="clear:both"></div>"。
利用伪元素,就可以不再HTML中加入标签。
如上面CSS代码,#div2:after {display:block; height:0; content:""; height:0; clear:both;}
#div2:after 的意思是再#div2内部的最后加入为元素:after,
首先要显示伪元素,所以display:block,
然后为伪元素加入空内容,以便伪元素中不会有内容显示在页面中,所以, content:"",
其次,为使伪元素不影响页面布局,将伪元素高度设置为0,所以, height:0,
最后,要清除#div3,所以,clear:both。
最后的显示效果
相关文章推荐
- 清除DIV浮动-使用:after
- 使用 after 伪类清除浮动
- 清除浮动(Clearing)--使用:after
- 清除浮动bug使用 .clearfix{*zoom:1;} 和 .clearfix:after
- css 伪元素 伪类 使用 万能清除浮动 ..
- 伪元素:after清除浮动
- 父元素的高度为0利用伪元素:after清除浮动可解决问题
- JS中使用 after 伪类清除浮动实例
- 【js的乐趣】清除浮动的方法双伪元素(万能清除器,使用方法)
- 清除浮动1-使用:after 伪元素
- 使用after伪类,配合IE的zoom或者overflow清除浮动
- 伪元素,使用伪元素来清除浮动
- 利用伪元素:after清除浮动
- CSS: 清除浮动-使用:Overflow
- ie6 ie7下使用clear不能将浮动的元素换行问题
- 使用clearfix样式来清除浮动
- .clearfix:after的用法,清除浮动