利用伪元素:after清除浮动
2014-08-29 11:44
183 查看
让页面呈现多列布局时经常会使用 float:left/right ,可是浮动布局会导致父元素的高度为0(未设置高度的情况下),不会根据子元素的高度而变化,另外,后面不需要浮动想在下一行显示的标签出现在浮动元素的后面。
所以我们在使用浮动进行布局的时候会需要一个块级元素(行内元素无效)来设置 clear 属性,如果浮动元素下方本来就有元素,那我们可以直接对该元素设置 clear:both ,若没有其他元素需要展示,我们往往会写一个空白标签来清除浮动
但是这样无疑会增加浏览器的渲染负担,所以考虑使用伪元素 :after 来代替这个空白标签,因为清除浮动需要在浮动元素后面,所以不可以使用 :before ,对 :after 设置 content:"" ,并使其 display:block 成为块级元素后 clear:both 来清除浮动:
该方法在 ie6、7 中无效,需要对 #content 设置 zoom:1。
#content{background:#000;} .left{width:100px;height:100px;background:#eee;margin:0 10px;float:left;}
所以我们在使用浮动进行布局的时候会需要一个块级元素(行内元素无效)来设置 clear 属性,如果浮动元素下方本来就有元素,那我们可以直接对该元素设置 clear:both ,若没有其他元素需要展示,我们往往会写一个空白标签来清除浮动
<div style="clear:both"></div>
但是这样无疑会增加浏览器的渲染负担,所以考虑使用伪元素 :after 来代替这个空白标签,因为清除浮动需要在浮动元素后面,所以不可以使用 :before ,对 :after 设置 content:"" ,并使其 display:block 成为块级元素后 clear:both 来清除浮动:
#content:after{content:"";display:block;clear:both;}
该方法在 ie6、7 中无效,需要对 #content 设置 zoom:1。
相关文章推荐
- 父元素的高度为0利用伪元素:after清除浮动可解决问题
- 常见样式问题四、利用:after、BFC清除浮动
- 伪元素:after清除浮动
- 使用伪元素(:after)清除浮动元素
- PHP界面复用以及利用after伪类元素清除浮动float所产生的塌陷
- 关于css清除元素浮动的方法总结(overflow clear floatfix)
- 利用overflow属性解决子元素float浮动后父级元素高度无法自适应的问题
- 清除浮动bug使用 .clearfix{*zoom:1;} 和 .clearfix:after
- 伪元素,使用伪元素来清除浮动
- 伪类:after清除浮动的原理和方法
- css3基础 清除浮动 ::before + ::after
- 内边距 外边距 和元素浮动 清除浮动
- float 浮动 《1》clear:both清除浮动 ;《2》设置父元素overflow:hidden来清除浮动
- 利用伪类清除浮动
- 记:安卓上的行内元素清除浮动失效
- 父元素加overflw:hidden 清除子元素浮动
- DIV 清除浮动--CSS 伪元素-- 阴影---鼠标事件
- Web前端面试指导(十九):CSS样式-如何清除元素浮动?
- 利用overflow:auto 来清除浮动