父元素的高宽比为0运用伪元素:after消除波动可处

2020-10-20 14:51 jianzhan
让网页页面展现两列合理布局时常常会应用 float:left/right ,但是波动合理布局会致使父元素的高宽比为0(未设定高宽比的状况下),不容易依据子元素的高宽比而转变,此外,后边不必须波动想在下1行显示信息的标识出現在波动元素的后边。

拷贝编码
编码以下:

#content{background:#000;}
.left{width:100px;height:100px;background:#eee;margin:0 10px;float:left;}

 
因此大家在应用波动开展合理布局的情况下会必须1个块级元素(行内元素失效)来设定 clear 特性,假如波动元素正下方原本就有元素,那大家能够立即对该元素设定 clear:both ,若沒有别的元素必须展现,大家常常会写1个空白标识来消除波动

拷贝编码
编码以下:

<div style="clear:both"></div>

可是这样无疑会提升访问器的3D渲染压力,因此考虑到应用伪元素 :after 来替代这个空白标识,由于消除波动必须在波动元素后边,因此不能以应用 :before ,对 :after 设定 content:"" ,并使其 display:block 变成块级元素后 clear:both 来消除波动:

拷贝编码
编码以下:

#content:after{content:"";display:block;clear:both;}

 
该方式在 ie6、7 中失效,必须对 #content 设定 zoom:1。