float是什么意思

css横向排列和弹性盒⼦布局display：flex

编写css时，我们经常需要将元素横向排列在⼀⾏，通常由以下三种元素可以实现：

1、float：

可以使⽤float偏移到⼀⾏，如：同时使⽤float:left即可偏移在同⼀⾏的左边，如下：

也可以⼀个模块使⽤float:right，⼀个模块使⽤float:left使⼀左⼀右排列，可以达到我们要求的效果，但是有⼀个问题--------他们的

⽗级模块会因为⼦模块的浮动⽽使主体没有⾼度。通俗来讲，我们⼀般是⽤⼦模块来撑起⽗模块的⾼度，但是，当你的⼦级元素使⽤了float

后，相当于浮动了起来，使不能够撑起⽗模块的⾼度的，所以此时，⽗模块容易“消失”。

如何解决这个问题呢，我们可以给⽗级元素加上⼀个**overfloat:hidden;**属性，这个的意思就是将超出的部分隐藏起来，利⽤这⼀属性，

我们可以解决此问题。

2、display:inline-block;

内联块级元素，它可以使模块排列在同⼀⾏，但是这样排列的模块容易在模块间出现⼩缝隙，如下：

可以看到，模块间有⼀个⼩⼩的缝隙，有问题，但可以解决。

我们可以在⽗模块加上font-size:0;将其⼦元素的字号设为0，再再⼦元素内部规定他们的字号因为这些⼦模块书写时，会换⾏（当然不会换

⾏就不会出现这个问题，但代码排列在⼀⾏太丑），换⾏后相当于在两个某块间产⽣了⼀个空格的字符空袭，所以我们将字号设为0，就可

以解决这个问题，但，还要在⼦元素重新设置字号，也是不太好，所以，下⼀种，是我认为最好的⽅式！！

3、弹性盒⼦！！

flex-wrap:warp;它的意思是元素横向排布时可以换⾏，如果我们不设置的话，它默认是不换⾏的，会⽣⽣把你的元素挤在⼀⾏，有时候看

着舒服，有时候就不⼀定了。。。。

justify-content:space-between;它的意思是⼦级模块排列在⽗级模块是产⽣的间隙将会被均匀排布在模块中间，是这个效果：

所以还是很⽅便的有⽊有，尤其是元素多的时候。你也可以使⽤

justify-content:center;他是将元素都挤在中间，是这样婶的：

弹性盒⼦的妙⽤还有很多，在这⾥我就不列举啦，有特殊需求的同学可以百纳博客，⼴搜百度，相信终会有属于你的⼀款~