web学习里面那个float：left不能实现左浮效果，以下是代码实现。

点击联系发帖人 时间：2019-03-07 05:17

　　float也能改变文档流不同的是，float不会让元素浮到另一个元素上面它仍然让元素在z-index:0层排列，只能通过float:left和float:right来控制元素在同一层里"左浮"和"右浮"float会改变正常的文档流排列，影响周围元素

}

此方法缺点：内层元素必须设定（固定）宽度

2.不定宽元素 - 设置行内块

然而很多时候，我们并不知道需要居中元素的宽度或者其宽度是随后台数据变化的。

下文开始我们以“分页效果”为例，诠释“不固定宽度”的元素如何设置水平居中：

CSS部分（前文公用部分略）：

此方法缺点：需要解决inline-block带来的默认间距（浏览器自动设置）

3.不定宽元素 - 设置浮动

用浮动嘚办法即可避开浏览器带来的inline-block默认间距

1.外层相对定位，内层相对定位

2.外层左浮动内层左浮动

3.外层右移50%，内层左移50%

html部分不变为避免重複class改为pages2，后文同理
 

 注：外层元素一旦设置float属性内层将自动刚好撑开外层宽度，等同于为外层设置display: inline-block;
 


 

 4.不定宽元素 - 绝对定位

1.外层绝对定位内層相对定位，外层的外层相对定位

2.外层左浮动内层左浮动

 

 
 

 
 

 （fit-content目前仅支持谷歌和火狐浏览器，但非常适合移动端开发！）

}