CSS+JS上下浮动左右对联广告特效

html-css017

CSS+JS上下浮动左右对联广告特效,第1张

给你个思路吧

左右对联浮动只用css就可以实现了

设置两个div,设置position属性为fixed

左侧浮动的div,left为0,top设置一定的值

右侧浮动的div,right为0,top设置一定的值

左边的

position:fixed left:50% margin-left:-600px top:50% margin-top:-你的对联高度一半

右边的

position:fixed right:50% margin-right:-600px top:50% margin-top:-你的对联高度一半

1、使用场景:

改变元素的排列方式的时候会用到浮动

浮动的元素会脱离文档流,正常的文档流视其而不见

浮动元素的停止:找到父元素的边框停止

浮动元素的卡顿:元素高度大于其他元素;

2、浮动引发的BUG:

1、父元素不设置高度,所有子元素都浮动

2、浮动的子元素撑不开父元素的高度

3、解决办法:

1、给父元素添加overflow: hidden

2、给父元素添加最后一个子元素 clear:both  清除浮动

3、能设置高度的元素都设置高度

4、伪类元素清除