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

一.浮動布局

1.先讓固定寬度的div浮動！使其脫離文檔流。
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的負值(3個div)

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

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

.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>

再看一個負值的實例：ul下一排緊密排放多個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;}/*一個負的margin-right,相當于把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()計算屬性

• 注意：使用calc計算屬性的時候 運算符(- +等等)兩邊必須有空格
• 注意兩個div必須一左一右浮動。
• 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布局

• 需要給父級div設置display: flex屬性。
• 固定寬度的div設置flex: 0 0 200px即可。
• 內(nèi)容區(qū)域的div直接寫出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>

簡單解釋下flex: 0 0 200px的用處，flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

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

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

建議優(yōu)先使用這個屬性，而不是多帶帶寫三個分離的屬性，因為瀏覽器會推算相關值。

flex-grow屬性

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

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

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

flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

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

如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

負值對該屬性無效。

flex-basis屬性

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

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

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

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

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