清除浮动、弹性盒模型

一、清除浮动

1.添加一个空的div
给浮动元素的同级下加一个空标签div，并将其属性设置为clear：both，让父级div自己获取高度，父容器现在必须考虑非浮动子元素的位置，而空标签肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。

 <style type="text/css">        .div1{            background-color:red;        }        .left{            float:left;            width:45%;            height:100px;            background-color:yellow;        }        .right{            float:left;            width:45%;            height:100px;            background-color: green;        }        .empty{            clear: both;        }        .div2{        background-color: mediumseagreen;        height: 100px;        margin-top: 10px;    }    </style></head>

<div class="div1">    <div class="left"></div>    <div class="right"></div>    <div class="empty"></div></div><div class="div2"></div>

优点：简单，代码少，浏览器支持好
缺点：有过多的空标签，代码冗余,刚开始理解不了，如果页面浮动过多，则不推荐使用。

2.运用overflow:hidden
用hidden或者auto 均可，区别在于一个可以查看隐藏部分，一个不可以
必须设置宽度或者用zoom:1的同时不能使用height,使用溢出隐藏时，浏览器会自动检测浮动区域的高度。
当代码中没有用溢出隐藏时，div1会失去高度，div2取代div1的高度。

<style type="text/css">       .div1{           background-color: red;           overflow: hidden;           width: 98%;       }       .left{           float: left;           background-color: green;           width:20%;           height:200px;       }       .right{           float: right;           background-color: yellow;           width: 50%;           height: 100px;       }       .div2{           width: 98%;           height: 200px;           background-color: mediumseagreen;           margin-top: 10px;       }    </style>

优点：代码简单 理解方便，浏览器支持好
缺点：不能和position一起使用，因为超出的部分会被隐藏

3.给父级定义一个伪类clearfloat
在父级中加一个clearfloat的class名，然后给clearfloat加上样式，在clearfloat的元素的结尾添加content中的内容,在这里添加了一个空的元素，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就可以撑开父元素。

<style type="text/css">        .div1{            background-color: red;        }        .left{            float: left;            background-color: green;            width:20%;            height:200px;        }        .right{            float: right;            background-color: yellow;            width: 50%;            height: 100px;        }        .div2{            height: 200px;            background-color: mediumseagreen;            margin-top: 10px;        }        .clearfloat:after{            display: block;            clear:both;            content:"";            visibility: hidden;            height: 0;        }    </style>

<div class="div1 clearfloat">    <div class="left"></div>    <div class="right"></div></div><div class="div2"></div>

优点：浏览器支持好，大型浏览器都适用,如腾讯、网易、新浪等
缺点：代码多，难以理解，需要两行代码配合才能被主流浏览器使用

4.给父级元素也加浮动（float:left）
优点：容易理解
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

5.给父元素手动加高度，解决了父级div无法获取高度的问题
优点：代码量少，容易理解
缺点：只适合高度固定的布局，如果子元素高度和父元素不一样，则不能用

二、flex的相关知识（主要是弹性盒模型）

1.Flexible boxes盒子
盒子按照宽高分出了以下8点

注意：设置为flex布局后，子元素的float、clear和vertical-align属性将失效。

2.属性设置
① flex-direction：主轴的方向（即项目的排列方向）
属性值：row（默认值） 主轴为水平方向，起点在左端。
row-reverse 主轴为水平方向，起点在右端。
column 主轴为垂直方向，起点在上沿。
column-reverse 主轴为垂直方向，起点在下沿。

②flex-wrap：控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
属性值：nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
③flex-flow：flex-direction属性和flex-wrap属性的简写
④justify-content ：定义了项目在主轴上的对齐方式
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
属性值： flex-start（默认值） 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔都相等。
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

 <style type="text/css">        .box{            width: 1000px;            height: 300px;            background-color: blue;            display:flex;            flex-direction:row-reverse;            justify-content:space-around;        }        .div1,.div2,.div3,.div4{            width: 150px;            height: 130px;            background-color: yellow;        }    </style>

<div class="box">    <div class="div1">ttt</div>    <div class="div2">eee</div>    <div class="div3">xxx</div>    <div class="div4">ttt</div></div>

⑤align-items：定义项目在交叉轴上如何对齐
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
属性值：flex-start 交叉轴的起点对齐。
flex-end 交叉轴的终点对齐。
center 交叉轴的中点对齐。
baseline 项目的第一行文字的基线对齐。
stretch（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度。

 <style type="text/css">        .box{            width: 1000px;            height: 300px;            background-color: blue;            display:flex;            align-items: baseline;        }        .div1,.div2,.div3,.div4{            width: 150px;            height: 130px;            background-color: yellow;        }    </style>

⑥align-content：多根轴线的对齐方式，一根轴该属性无效
属性值：flex-start 与交叉轴的起点对齐。
flex-end 与交叉轴的终点对齐。
center 与交叉轴的中点对齐。
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值） 轴线占满整个交叉轴。

⑦设置在项目上的6个属性
order：项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow：放大比例，默认为0-如果存在剩余空间也不放大。
—-如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
—-如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink：缩小比例，默认为1-如果空间不足项目将缩小。
—-如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
—-如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
—-负值对该属性无效。

flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
—-如果设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
—-flex-basis:flex-basis可以理解为我们给子元素设置的宽度。
—-默认值是auto,宽度设置为auto时，盒子的宽度取决你们元素的宽度。

flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
—-该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
—-建议优先使用这个属性而不分开写，浏览器会推算相关值。
—-grow表示伸张因子，shrink表示是收缩因子。
—-grow在flex容器下的子元素的宽度之和比容器小的时候起作用。
—-grow定义了子元素的宽度增长因子，除去子元素之和剩下的宽度会按照各个子元素的gorw值进行平分加大各个子元素上。
—-计算容器还剩空间：available_space(容器还剩的空间）=container_size(容器宽度)-flex_item_total(子元素宽度之和)
—-计算增长单位：grow_unit(增长单位)=available_space/flex_grow_total(子元素增长因子之和)
—-得到子元素的宽度：flex-item-width(子元素计算得到的宽度)=flex-basis+grow-unit*flex-grow

align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。