前端布局记录

1 布局前言

2 布局要点

CSS标准盒模型(或W3C盒模型)
一个web页面是由众多html元素拼凑而成的，而每一个html元素，都被解析为一个矩形盒，而CSS盒模型就是这种矩形盒的解构模型。CSS盒模型，它由内到外、被四条边界Content edge、Padding edge、Border edge和Margin edge划分为四个区域：Content area、Padding area、Border area和Margin area，在形状上，Content area（又称content-box）是实心矩形，其余是空心环形（空心部分是Content area），如下图所示：
box-sizing(css3) 顾名思义，其作用与设置CSS box的尺寸大小有关，而CSS box又可细分为:
- content-box(即content area)
- padding-box(=content area + padding area)
- border-box(=content area + padding area + border area)
- margin-box(=content area + padding area + border area + margin area)
元素的分类及其布局特性
- 块级元素：display属性取block、table、flex、grid和list-item等值的独占一行显示的元素。
  1. 独占一行（width默认为100%，height为0）；
  2. 可以设置任何尺寸相关的属性（width、padding、margin和border）；
- 行内元素：display属性取inline值的可在同一行内排列显示的元素。
  1. 在一行内可以与多个同类型的元素按从左到右的顺序排列；
  2. 不可置换行内元素不能设置width、height和垂直方向上的margin，而可置换行内元素则可以；
  3. 在水平和垂直方向上的对齐方式，行内级元素分别受父元素的text-align属性和自身vertical-align属性的控制（父元素是table-cell元素时，也受父元素的vertical-align属性控制），在水平方向上默认左对齐，在垂直方向上默认在行框的baseline基线上显示。
- 行内块级元素：display属性取inline-block、inline-table、inline-flex和inline-grid等值的兼具块级元素和行内级元素布局特性的元素。
  1. 排列方式与行内级元素同，不独占一行，在一行内按从左到右的顺序排列；
  2. 水平和垂直方向上的对齐方式与行内级元素同；
  3. 和块级元素一样，可以设置任何尺寸属性（但width默认为0）；
模型结构
line box的模型结构，top线、text-top线、middle线、baseline线、text-bottom线和bottom线

3 布局分类

传统布局方案（浮动、定位）

浮动 (float) (left|right)

浮动起始位置：浮动元素（包括左右）的浮动起始位置，为最后一行最左侧的空白位置，而不管空白位置是否能够容纳当前浮动元素；

浮动结束位置：

左浮动元素遇到第一个左浮动元素或包含块的最左侧padding时，结束浮动；

右浮动元素遇到第一个右浮动元素或包含块的最右侧padding时，结束浮动；

清除浮动(clear)(left|right|both)：其作用是改变“当前元素”与“前一个声明的浮动元素”之间的默认布局规则，这种改变主要体现为：让当前元素换行显示。这句话包含三个要素，分别为：

使用者：当前元素（浮动元素或者非浮动元素的块级元素）
作用对象（清除谁的浮动）：前一个声明的浮动元素
目的（作用）：让当前元素换行显示

注：当子元素进行浮动时候，会造成父元素高度塌陷，不能自动拉伸，引入clearfix

<!DOCTYPE html>
<html lang="zh_CH">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <style>
    .parent {
      width: 100%;
      border: 1px solid #2f2f2f;
    }

    .child-fl {
      float: left;
      width: 30%;
      height: 100px;
      background-color: #63b5ee;
    }

    .child-fr {
      float: right;
      width: 30%;
      height: 100px;
      background-color: #eedb37;
    }

    .clearfix::after {
      display: block;
      content: "";
      clear: both;
    }

  </style>
</head>
<body>

<div class="parent clearfix">
  <div class="child-fl">FL</div>
  <div class="child-fr">FR</div>
</div>
</body>
</html>

Position 属性 (static|relative|absolute|fixed)

flex布局方案
flexbox 布局是一个完整的布局模块而不是一个单独的属性，因此它涉及很多东西，包括它的整个属性集。其中有的属性是在容器（container，也可以叫做父元素，称为flex container）上设置的，有的则是在容器的子元素（item，也可以叫做子元素，称为flex items）设置。
注：Flexbox布局最适合应用程序的组件和小规模布局，而 Gird 布局则适用于较大规模的布局。
如果 “常规”布局基于 block(块) 和 inline(内联) 流动方向，flex 布局则是基于 “flex-flow(弹性流动)” 方向。请在规范中看一下这个图片，解释flex布局背后的主要思想。
在flex布局中，flex 项（就是子元素）要么按照 main axis(主轴)（从 main-start 到 main-end ）排布，要么按照cross axis(交叉轴) (从 cross-start 到cross-end)排布。
- main axis: flex 容器的主轴，flex 项沿着主轴排布，注意主轴不一定是水平的，主轴是水平还是垂直取决于 flex-direction 属性（见下文）。
- main-start|main-end: 分别表示主轴的开始位置和结束位置，flex 项在容器中会从 main-start 到 main-end 排布。
- main size: flex 项占据主轴的宽度或高度。flex 项的 main size 属性是要么是“宽度”，要么是“高度”，这取决于主轴方向。
- cross axis: 垂直于主轴的轴线称为交叉轴，其方向取决于主轴方向。
- cross-start|cross-end: 分别表示交叉轴的开始位置和结束位置。flex 项在交叉轴上的排布从 cross-start 开始位置到 cross-end 结束位置。
- cross size: flex 项占据交叉轴的宽度或高度。flex 项的 cross size 属性是要么是“宽度”，要么是“高度”，这取决于交叉轴方向。
父元素属性(flex container)
display
用来定义一个 flex 容器。如果设置为 flex 则容器呈现为块状元素，设置为inline-flex 则容器呈现为行内元素。它为所有直接子元素提供了 flex 上下文。
1
2
3
.container {
display: flex; /* or inline-flex */
}
flex-direction
flex-direction 属性确立了主轴，从而定义了 flex 项在 flex 容器中的排布方向。 Flexbox 是单向布局，有些时候我们也称作一维布局。可以将 flex 项视为主要沿着水平行或垂直列排布。
1
2
3
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
- row (默认值) :行排布。在 ltr (left to right，从左到右)排版方式下，flex 项从左到右排列，在 rtl(right to left，从右到左)排版方式下，flex 项从右到左排列。
- row-reverse: 反向行排布，即 row 的反方向，在 ltr 中从右向左，在 rtl 中从左到右。
- column: 列排布，与 row 相似，但是 flex 项从上到下排布。
- column-reverse: 反向列排布，即 column 反方向，与 row-reverse 相似，只是 flex 项从上到下排布。
flex-wrap
默认情况下，flex 项会尽可能地尝试排在同一行上（行或列），通过设置 flex-wrap 来决定 flex 项是否允需要换行。
1
2
3
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap (默认值) : 所有的 flex 项都会在同一行上排布，也就是我们常说的单行，或不换行。
- wrap: flex 项将从上到下根据实际情况排布再多行上，也就是我们常说的多行，或会换行。
- wrap-reverse: flex 项将 从下到上 根据实际情况排布再多行上折行。
flex-flow （适用于父级 flex 容器）
这是 flex-direction 和 flex-wrap 属性的缩写形式。同时定义 flex 容器的主轴和交叉轴。默认是 row nowrap。
1
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content
justify-content 属性定义了flex 项沿主轴方向的对齐方式。
当一行中的所有 flex 项都是固定大小，或者是灵活大小但已经达到最大 main size 时，它可以帮助分配主轴上的剩余空间。当 flex 项溢出主轴的时候，它还可以用来控制flex 项的对齐方式。
- flex-start (默认值) : flex 项从主轴的开始位置（main-start）开始排布。
- flex-end : flex 项从主轴的结束位置（main-end）开始排布
- center: flex 项沿主轴居中排布。
- space-between: flex 项沿主轴均匀排布，即我们常说的沿主轴 两端对齐 ，第一个flex 项在主轴开始位置，最后一个flex 项在主轴结束位置。
- space-around: flex 项沿主轴均匀排布。要注意的是 flex 项看起来间隙是不均匀的，因为所有 flex 项两边的空间是相等的。第一项在容器边缘有一个单位的空间，但是在两个 flex 项之间有两个单位的间隙，因为每个 flex 项的两侧都有一个单位的间隙。
- space-evenly: 任何两个 flex 项之间的间距（以及到 flex 容器边缘的空间）相等。
1
2
3
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
align-items
align-items 定义了 flex 项如何沿当前行在交叉轴上排布的默认行为。可以将其视为交叉轴（垂直于主轴）上的对齐方式。
- flex-start: flex 项按照交叉轴的开始位置（cross-start）对齐。
- flex-end: flex 项按照交叉轴的结束位置（cross-end）对齐。
- center: flex 项以交叉轴为中心，居中对齐。
- baseline: flex 项按照他们的文字基线对齐。
- stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性。
1
2
3
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-content
当交叉轴上有剩余空间时，align-content 可以设置 flex 容器中的行在交叉轴上如何分配剩余空间，类似于 justify-content 在主轴上对齐单个 flex 项的方式。
注意：当只有一行 flex 项时，此属性不起作用。
- flex-start：多行在容器的开始位置排布
- flex-end：多行在容器的结束位置排布
- center：多行在容器的总结位置排布
- space-between：多行均匀分布；第一行分布在容器的开始位置，最后一行分布在容器的结束位置
- space-around: 多行均匀分布，并且每行的间距（包括离容器边缘的间距）相同；
- strech (默认值)：多行拉伸以填充满整个剩余空间
1
2
3
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex 项属性 (flex items)
order
默认情况下，flex 项按源（HTML结构）顺序排布。但是，order 属性可以控制它们在 flex 容器中的显示顺序。
1
2
3
.item {
order: <integer>; /* 默认值是 0 */
}
flex-grow
flex-grow 定义了 flex 项在有可用剩余空间时拉伸比例。它接受的值作为比例，无单位。它规定了 flex 项应该占 flex 容器中可用空间的比例。
如果所有 flex 项的 flex-grow 都设置为 1 ，则父容器中的剩余空间将平均分配给所有子项。如果其中一个子项的值为 2 ，则该子项占用的剩余空间是其他子项的两倍（或者至少会尽力获得）。
1
2
3
.item {
flex-grow: <number>; /* default 0 */
}
比如我们得 flex 容器中有 6 个 flex 项，每个 flex 项的 flex-grow 初始值都是 1。如果我们将每个 flex 项的 flex-grow 相加起来，总和为 6。因此 flex 容器的总宽度被平均分成了 6 份。每个 flex 项增长到填充容器可用空间的1/6。
当我们将第 3 个 flex 项的 flex-grow 设置为 2 时，flex 容器现在被分成了 7 等份，因为所有 flex-grow 属性是：1 + 1 + 2 + 1 + 1 + 1。第 3 个 flex 项占了整个容器空间的 2/7，其他的占了 1/7。
flex-shrink
flex-shrink 定义了 flex 项的收缩的能力。（注：与 flex-grow 拉伸正好相反，flex-shrink 决定 flex 项允许收缩多少比例。）
1
2
3
.item {
flex-shrink: <number>; /* default 1 */
}
flex-basis
flex-basis 定义了在分配剩余空间之前 flex 项默认的大小。可以设置为某个长度值（e.g. 20%, 5rem,等）或者关键字。关键字 auto 意味着 flex 项会按照其本来的大小显示（暂时由 main-size 关键字完成，直到弃用）。关键字 content 意味着根据内容来确定大小——这个关键字到目前没有被很好地支持，所以测试起来比较困难，与content的类似的关键字还有max-content, min-content, fit-content。
如果设置为 0 , 则 flex 项内容周围的空隙不会根据 flex-grow 按比例分配，如果设置为 auto，则 flex 项周围额外的空袭会根据 flex-grow 按照比例分配。
1
2
3
.item {
flex-basis: <length> | auto; /* default auto */
}
flex
flex 是 flex-grow、flex-shrink、flex-basis 三个属性的缩写。其中第二个和第三个参数(flex-shrink 和 flex-basis)是可选的。默认值为0 1 auto。
1
2
3
.item {
flex: none | [ < 'flex-grow'> < 'flex-shrink'>? || < 'flex-basis'> ]
}
align-self
align-self 属性允许某个单独的 flex 项覆盖默认的对齐方式（或由 align-items 指定的对齐方式）。
具体的属性值得含义可以参考 align-items的解释。
1
2
3
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
注：float,clear和vertical-align 对 flex 项没有任何作用。

grid布局方案

Grid 兼容性 2017年3月左右，大部分浏览器都会开始默认支持Grid布局

网格容器属性：

display: grid | inline-grid | subgrid

grid：定义一个块级的网格容器
inline-grid：定义一个内联的网格容器
subgrid：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子。

grid-template-columns / grid-template-rows

使用空格分隔的值列表，用来定义网格的列和行。这些值表示网格轨道(Grid Track) 大小，它们之间的空格表示网格线。

值：
– <track-size>：可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）
– <line-name>：你可以选择的任意名称

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

grid-template-areas

通过引用 grid-area 属性指定的网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空单元格。这个语法本身可视作网格的可视化结构。

值：

<grid-area-name>：由网格项的 grid-area 指定的网格区域名称
.（点号）：代表一个空的网格单元
none：不定义网格区域

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

创建一个 4 列宽 3 行高的网格。整个顶行将由 header 区域组成。中间一排将由两个 main 区域，一个是空单元格，一个 sidebar 区域组成。最后一行全是 footer 区域组成。

grid-template

用于定义 grid-template-rows ，grid-template-columns ，grid-template-areas 简写属性。

值：

none：将所有三个属性设置为其初始值
<grid-template-rows> / <grid-template-columns>：将 grid-template-columns 和 grid-template-rows 设置为相应地特定的值，并且设置grid-template-areas为none

1
2
3

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

grid-column-gap / grid-row-gap

指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}
.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

justify-items

沿着 inline（行）轴线对齐网格项(grid items)（相反的属性是 align-items 沿着 block（列）轴线对齐）。此值适用于容器内的所有网格项。

值：

start：将网格项对齐到其单元格的左侧起始边缘（左侧对齐）
end：将网格项对齐到其单元格的右侧结束边缘（右侧对齐）
center：将网格项对齐到其单元格的水平中间位置（水平居中对齐）
stretch：填满单元格的宽度（默认值）

1
2
3

.container {
  justify-items: start | end | center | stretch;
}

align-items

沿着 block（列）轴线对齐网格项(grid items)（相反的属性是 justify-items 沿着 inline（行）轴线对齐）。此值适用于容器内的所有网格项。

值：

start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐）
end：将网格项对齐到其单元格的底部结束边缘（底部对齐）
center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐）
stretch：填满单元格的高度（默认值）

1
2
3

.container {
  align-items: start | end | center | stretch;
}

justify-content

有时，你的网格合计大小可能小于其网格容器(grid container) 大小。如果你的所有网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。在这种情况下，您可以设置网格容器内的网格的对齐方式。此属性沿着 inline（行）轴线对齐网格（相反的属性是 align-content ，沿着 block（列）轴线对齐网格）。

值：

start：将网格对齐到网格容器(grid container) 的左侧起始边缘（左侧对齐）
end：将网格对齐到网格容器的右侧结束边缘（右侧对齐）
center：将网格对齐到网格容器的水平中间位置（水平居中对齐）
stretch：调整网格项(grid items) 的宽度，允许该网格填充满整个网格容器的宽度
space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
space-evenly：在每个网格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

1
2
3

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

align-content

有时，你的网格合计大小可能小于其网格容器(grid container) 大小。如果你的所有网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。在这种情况下，您可以设置网格容器内的网格的对齐方式。此属性沿着 block（列）轴线对齐网格（相反的属性是 justify-content ，沿着 inline（行）轴线对齐网格）。

值：

start：将网格对齐到网格容器(grid container) 的顶部起始边缘（顶部对齐）
end：将网格对齐到网格容器的底部结束边缘（底部对齐）
center：将网格对齐到网格容器的垂直中间位置（垂直居中对齐）
stretch：调整网格项(grid items) 的高度，允许该网格填充满整个网格容器的高度
space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
space-evenly：在每个网格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间

1
2
3

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

grid-auto-columns / grid-auto-rows

指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。当网格中的网格项多于单元格时，或者当网格项位于显式网格之外时，就会创建隐式轨道

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}
.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

grid-auto-flow

如果你有一些没有明确放置在网格上的网格项(grid items)，自动放置算法 会自动放置这些网格项。该属性控制自动布局算法如何工作。

值：

row：告诉自动布局算法依次填充每行，根据需要添加新行（默认）
column：告诉自动布局算法依次填入每列，根据需要添加新列
dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺

子元素网格项(Grid Items) 属性

grid-column-start / grid-column-end / grid-row-start / grid-row-end

通过引用特定网格线(grid lines) 来确定网格项(grid item) 在网格内的位置。 grid-column-start / grid-row-start 是网格项开始的网格线，grid-column-end / grid-row-end 是网格项结束的网格线。

值：

<line> ：可以是一个数字引用一个编号的网格线，或者一个名字来引用一个命名的网格线
span <number> ：该网格项将跨越所提供的网格轨道数量
span <name> ：该网格项将跨越到它与提供的名称位置
auto：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

grid-column / grid-row

分别为 grid-column-start + grid-column-end 和 grid-row-start + grid-row-end 的简写形式。

值：

<start-line> / <end-line>：每个网格项都接受所有相同的值，作为普通书写的版本，包括跨度

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

grid-area

为网格项提供一个名称，以便可以被使用网格容器 grid-template-areas 属性创建的模板进行引用。另外，这个属性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写。

值：

<name>：你所选的名称
<row-start> / <column-start> / <row-end> / <column-end>：数字或分隔线名称

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
.item-d {
  grid-area: header
}

justify-self

沿着 inline（行）轴线对齐网格项（相反的属性是 align-self ，沿着 block（列）轴线对齐）。此值适用于单个网格项内的内容。

值：

start：将网格项对齐到其单元格的左侧起始边缘（左侧对齐）
end：将网格项对齐到其单元格的右侧结束边缘（右侧对齐）
center：将网格项对齐到其单元格的水平中间位置（水平居中对齐）
stretch：填满单元格的宽度（默认值）

.item {
  justify-self: start | end | center | stretch;
}
.item-a {
  justify-self: start;
}

align-self

沿着 block（列）轴线对齐网格项(grid items)（相反的属性是 justify-self ，沿着 inline（行）轴线对齐）。此值适用于单个网格项内的内容。

值：

start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐）
end：将网格项对齐到其单元格的底部结束边缘（底部对齐）
center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐）
stretch：填满单元格的高度（默认值）

1
2
3

.item{
  align-self: start | end | center | stretch;
}

几个常见布局问题

水平居中
- margin:0 auto；
  最常见的水平居中解决方案，但有其局限性：块级元素，已知宽度，父级元素有宽度
- text-align + inline-block
  在父级元素上设置text-align：center;将需要居中的元素设置为inline-block（或inline）
- position绝对定位
  1
  2
  3
  position:absolute;(同时设置父级元素relative)
  left:50%;(包括了元素本身的宽度)
  transform:translateX(-50%);
- flex弹性布局之justify-content
  在父级添加
  1
  2
  3
  4
  #parent{
  display:flex;
  justify-content:center;
  }
垂重居中
- height +line-height
  对于一个需要居中的 行内（块）元素 ，设置父元素的高度与行高相等，即可实现垂直居中
- table-cell + vertical-align
  1
  2
  3
  4
  .parent{
  display:table-cell;
  vertical-align:middle
  }
- absolute+transform
- flex+align-items
  父类添加
  1
  2
  3
  4
  .parent{
  display:flex;
  align-items:center;
  }

左边固定右边自适应

.left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: #fff277;
}
.right {
  background-color: #b5eeff;
  margin-left: 210px;
}
<div class="left"></div>
<div class="right"></div>

圣杯布局

在父级添加左右padding，将三栏全部挤到中间，然后在两侧边栏添加相对定位，配合left和right属性，将它们挪向两边，为中间内容腾出位置

    .container {
      overflow: hidden;
      padding: 0 200px;
    }

    .middle {
      width: 100%;
      height: 400px;
      float: left;
      background-color: yellow;
    }

    .left {
      width: 200px;
      height: 400px;
      float: left;
      background-color: blue;
      margin-left: -100%; /*挤到上一行*/
      position: relative;
      left: -200px;
    }

    .right {
      width: 200px;
      height: 400px;
      float: left;
      background-color: darkseagreen;
      margin-left: -200px; /*挤到上一行*/
      position: relative;
      right: -200px;
    }
 
<div class="container">
  <div class="middle"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

双飞翼布局

在中间栏的div中嵌套一个div，内容写在嵌套的div里，对嵌套的div设置margin-left和margin-right。

.container {
      overflow: hidden;
    }

    .middle {
      width: 100%;
      height: 400px;
      float: left;
      background-color: yellow;
    }

    .left {
      width: 200px;
      height: 400px;
      float: left;
      background-color: blue;
      margin-left: -100%;
    }

    .right {
      width: 200px;
      height: 400px;
      float: left;
      background-color: darkseagreen;
      margin-left: -200px;
    }

    /*解决遮挡*/
    #inside {
      margin: 0 210px;
      height: 400px;
      background-color: red;
    }
    
<div class="container">
  <div class="middle">
    <div id="inside">middle</div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

1 布局前言

2 布局要点

3 布局分类

传统布局方案（浮动、定位）

flex布局方案

flex-flow （适用于父级 flex 容器）

flex 项属性 (flex items)

grid布局方案

子元素 网格项(Grid Items) 属性

grid-column-start / grid-column-end / grid-row-start / grid-row-end

几个常见布局问题

margin:0 auto；

text-align + inline-block

position绝对定位

flex弹性布局之justify-content

height +line-height

table-cell + vertical-align

absolute+transform

flex+align-items

子元素网格项(Grid Items) 属性