摘要：一浮動(dòng)布局先讓固定寬度的浮動(dòng)使其脫離文檔流。的值等于固定的寬度相等。負(fù)邊距在普通文檔流中的作用和效果負(fù)值，減少高度。的寬度必須要減去的寬度要與固定寬度保持一致。負(fù)值對(duì)該屬性無(wú)效。

一.浮動(dòng)布局

1.先讓固定寬度的div浮動(dòng)！使其脫離文檔流。
2.margin-left的值等于固定div的寬度相等。

   .aside{
        float: left;
        width: 200px;
        background-color: red;
    }
    .content{
        margin-left: 200px;
        background-color: blue;
    }
    
<div class="aside">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
div>
<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
div>

二.margin的負(fù)值(3個(gè)div)

是固定寬度的div脫離文檔流。
利用marin負(fù)值可以使得，后面的div可以與前面的div 保持同行顯示。
給包裹內(nèi)容的div加margin-left 可以使得與左邊的文字不重疊

解釋：margin負(fù)值理論
a.當(dāng)給一個(gè)元素設(shè)置margin 負(fù)值（top/left）,該元素將在該方向上產(chǎn)生位移。
b.當(dāng)給一個(gè)元素設(shè)置margin負(fù)值（bottom/right）,這個(gè)元素并不會(huì)像你所預(yù)想的產(chǎn)生位移，而是將任何緊隨其后的元素“拉”過(guò)來(lái)，覆蓋在自己的上邊。
c.負(fù)邊距在普通文檔流中的作用和效果(margin-bottom負(fù)值，減少高度)。
d.左和右的負(fù)邊距對(duì)元素寬度的影響（margin-right 負(fù)值 沒(méi)有設(shè)置寬度的情況，增加寬度）。
e.負(fù)邊距對(duì)浮動(dòng)元素的影響（margin-left負(fù)值：覆蓋）。

.aside{
    float: left;
    margin-right: -200px;
    width: 200px;
    background-color: red;
}
.content{
    float: right;
}
.content .inner{
    margin-left: 200px;
    background-color: blue;
}

<div class="aside">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
div>
<div class="content">
    <div class="inner">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia labore facere delectus quaerat expedita, tenetur recusandae tempora eos natus suscipit voluptatum                 necessitatibus soluta voluptates modi ullam. Ab minima similique, illum!
    div>
div>

再看一個(gè)負(fù)值的實(shí)例：ul下一排緊密排放多個(gè)li

 <style>
body,ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
.container{ height:210px; width:460px; border:5px solid #000;}
ul{ height:210px; overflow:hidden; margin-right:-20px;}/*一個(gè)負(fù)的margin-right,相當(dāng)于把ul的寬度增加了20px*/
li{ height:100px; width:100px; background:#09F; float:left; margin-right:20px; margin-bottom:10px;}
style>
<div class="container">
    <ul>
        <li>子元素1li>
        <li>子元素2li>
        <li>子元素3li>
        <li>子元素4li>
        <li>子元素5li>
        <li>子元素6li>
        <li>子元素7li>
        <li>子元素8li>
    ul>
div>

三.calc()計(jì)算屬性

• 注意：使用calc計(jì)算屬性的時(shí)候 運(yùn)算符(- +等等)兩邊必須有空格
• 注意兩個(gè)div必須一左一右浮動(dòng)。
• calc的寬度必須要減去的寬度要與固定寬度保持一致。

.aside{
  float: left;
  width: 200px;
}
.content{
  float: right;
  width:calc(100% - 200px);
}
<div class="aside">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
div>

四.flex布局

• 需要給父級(jí)div設(shè)置display: flex屬性。
• 固定寬度的div設(shè)置flex: 0 0 200px即可。
• 內(nèi)容區(qū)域的div直接寫(xiě)出flex: 1即可。

body{
    display: flex;
}
.aside{
    flex: 0 0 200px;
    background-color: red;
}
.content{
    flex: 1;
    background-color:blue;
}

<div class="aside">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat magnam nihil nostrum, similique dolor deserunt voluptatem pariatur alias, ipsum, error quos quo accusantium. Deleniti neque, pariatur voluptates maxime quam perferendis!
div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tempora sequi minima, placeat esse nulla dolor dolores praesentium illo, distinctio fugiat eligendi debitis animi ut impedit, magni vitae officiis, architecto.
div>

簡(jiǎn)單解釋下flex: 0 0 200px的用處，flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

.item {
  flex: none | [  ? ||  ]
}

該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優(yōu)先使用這個(gè)屬性，而不是多帶帶寫(xiě)三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。

flex-grow屬性

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

.item {
  flex-grow: ; /* default 0 */
}

如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。

flex-shrink屬性

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

.item {
  flex-shrink: ; /* default 1 */
}

如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。

負(fù)值對(duì)該屬性無(wú)效。

flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。

.item {
  flex-basis:  | auto; /* default auto */
}

它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間。

那么現(xiàn)在應(yīng)該明白flex: 0 0 200px的用處了吧。

參考：阮一峰老師:Flex 布局教程：語(yǔ)法篇