css剩余宽度一半,CSS 布局实现左边固定宽度，右边占满剩余宽度

float 浮动

.container{ background-color: yellow; }

.container .left{ background-color: blue; width: 100px; }

.container .right { background-color: red; }

.s1 {}

.s1 .left{float: left; }

.s1 .right{overflow: hidden;}

.s1 .clear{clear: both;}

左边左边左边左边左边左边左边左边左边左边左边左边

右边右边右边右边右边右边右边右边右边右边右边右

浮动是最普遍实现的方式，但 css 浮动的初衷并不是用于布局的，所以浮动布局迟早会被淘汰，应该作为备选方式使用。

左边绝对定位

.container{ background-color: yellow; }

.container .left{ background-color: blue; width: 100px; }

.container .right { background-color: red; }

.s2 {position: relative;}

.s2 .left{position: absolute; left: 0; top: 0;}

.s2 .right{margin-left: 100px;}

左边左边左边左边左边

右边右边右边右边右边右边右边右边右边右边右边右右边右边右边右边右边右边右边右边右边右边右边右

绝对定位方式有个缺点，当左边高于右边时，左边会超出父元素，需要使用 js 补救。

flex 布局

.container{ background-color: yellow; }

.container .left{ background-color: blue; width: 100px; }

.container .right { background-color: red; }

.s3 { display: flex; }

.s3 .left{ }

.s3 .right{flex-grow: 1;}

左边左边左边左边左边左边左边左边左边

右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边

flex 是最鼓励使用的方式，低端 IE 不支持，但在移动端得到了广泛的使用。