css 中的浮动使用场景和引发的BUG及解决办法

html-css014

css 中的浮动使用场景和引发的BUG及解决办法,第1张

1、使用场景:

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

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

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

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

2、浮动引发的BUG:

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

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

3、解决办法:

1、给父元素添加overflow: hidden

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

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

4、伪类元素清除

    

暂时试了下,

你的<a>里面有数字的会下沉,所以你需要在左右箭头里面加一些内容

例如:

<div class="paging">

<a href="#" class="pagePrev">p<b></b></a>

<a href="#">1</a>

<a href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#" class="pageNext">n<b></b></a>

</div>

错位的原因我也说不清~这算是一种解决方法吧~

或者写nbsp咯~