csshover的时候添加边框改变高布局错位

img


csshover的时候添加边框改变高布局错位
csshover的时候添加边框改变高布局错位

浮动会脱离标准文档流，hover改变了某元素高度，导致下一行元素会“浮”到该元素右下。

  1. 使用flex布局，父级设置display: flex; flex-wrap: wrap;，子级设置flex-shrink: 0;
  2. 子级用inline-block替换float: left,设置display: inline-block; vertical-align: top;
  3. 如果是固定数量，可以对下一行第一个清除浮动，例如一行有6个，总共有3行，对第7，13个进行清除浮动
    li:nth-child(7),
li:nth-child(13) {
 clear: both;
}

hover前有1px的边框然后hover后边框变为2原来高是235hover后是275 而且边距也清零

*里加个box-sizing: border-box;试试