本文已参与「新人创作礼」活动，一起开启掘金创作之路。

flex

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。\

几个注意点：

• 任何一个容器都可以指定为 Flex 布局。
• 行内元素也可以使用 Flex 布局。
• Webkit 内核的浏览器，必须加上-webkit前缀。
• 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex几个属性:

• flex-direction:flex-direction,决定主轴的方向（即项目的排列方向）。
• flex-wrap:flex-wrap，定义如果一条轴线排不下容器里的项目，如何换行。
• flex-flow:是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content: 定义了项目在主轴上的对齐方式。
• align-items:定义交叉轴上如何对齐。
• align-content: 定义了多根轴线的对齐方式,但是如果只有一根轴线，该属性不起作用。

关于flex详细使用，可以 点这里 查看一些使用案例（阮一峰老师分享）。

float

float是浮动布局，是我们css中最常使用的方法之一。

什么是浮动布局？

浮动是将该块元素从原来的文档流模式中分离出来，它后面的对象，就视它不存在，从而占领它的位置。关键词是脱离文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

float的优点

• 可以实现文字环绕在图片周围。
• 元素浮动了之后，它有着块级元素的一些性质，例如可以设置宽高等
• 但它与inline-block还是有一些区别，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

float缺点

脱离文档流，会造成父级元素 高度塌陷。

为什么要清除浮动？

在使用浮动时，也存在着弊端，当子元素设置了float属性之后，且父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0)，因此清除浮动是为了解决高度塌陷的问题。

清除浮动的方式clear清除浮动

1. clear清除浮动

• 父级div定义伪类：after（zoom解决IE6,7）推荐

  .clearfloat:after{
      display:block;
      clear:both;
      content:"";
      visibility:hidden;
      height:0
  }
  .clearfloat{
      zoom:1
  }
  

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持

• 在结尾处添加空div标签clear:both

    <div>
        <div style:'clear:both'></div>
    </div>

缺点：如果页面浮动布局多，就要增加很多空div （不建议使用）
优点：简单，代码少，浏览器支持好，不容易出现怪问题

• 结尾处加br标签clear:both

2. BFC清除浮动 :BFC可以包含浮动；所以可以用来解决浮动父元素高度坍塌的问题。

• 父级div定义overflow:hidden。 优点：简单，代码少，浏览器支持好； 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏

• 父级div定义overflow:auto。优点：简单，代码少，浏览器支持好；缺点：内部宽高超过父级div时，会出现滚动条。