开胃小菜（ https://blog.csdn.net/wayne1998/article/details/80230608 ）
float脱离文档流，且其属性只会影响其后的元素， 使用float脱离文档流时，虽然其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。 （ 什么是文档流？ “流”，我们在生活中经常听到这个词，比如水流，电流。就像水流从高处往低处流一样，我们可以把文档流想象成html元素在浏览器上“流动”。浏览器的顶端就是河流的源头，浏览器的底部就是河流的尽头。 那么所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。 当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行内元素。 ）
注意：center一栏需放在浮动模块后 若right在center后，因为center的
css
.left{
float: left;
width: 300px;
background: red;
height: 100px;
}
.right{
float: right;
width: 300px;
background: pink;
height: 100px;
}
.center{
background: yellow;
height: 100px;
}
dom
<div class="left "></div>
<div class="right "></div>
<div class="center"></div>
absolute绝对定位：绝对定位的元素以第一个非static父元素为参照。如果没有非static的父元素，则以body为参照。
.left{
position: absolute;
left: 0;
width: 300px;
background: red;
height: 100px;
}
.right{
position: absolute;
right: 0;
width: 300px;
background: pink;
height: 100px;
}
.center{
margin-left: 32px;
background: yellow;
height: 100px;
}
flex不理解建议看 阮 大大的文章（ http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html ）
.father{
height: 100px;
display: flex;
}
.left{
width: 300px;
background: red;
height: 100px;
}
.right{
width: 300px;
background: pink;
height: 100px;
}
.center{
flex: 1;
background: yellow;
height: 100px;
}
dom
<div class="father">
<div class="left "></div>
<div class="center "></div>
<div class="right"></div>
</div>
4.table
`
.father{
height: 100px;
display: table;
width: 100%;
}
.father>div{
display: table-cell;
}
.left{
width: 300px;
background: red;
}
.right{
width: 300px;
background: pink;
}
.center{
background: yellow;
}
5.grid布局
.father{
height: 100px;
display: grid;
width: 100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
}
只有flex和table布局可以自适应
浮动的会到左边，因为左边没有了浮动
定位的直接向下，因为设置了左右位置
grid是字超出，盒子不变
下面链接完美解释