这是一道面试题，你有多少种方法？这里我们假设左侧命名为left，宽度为200px，右侧命名为right。即默认。left{width:200px;}我的理解分为四类。Flex布局需要设置父元素的高度。网格布局需要设置父元素的高度。元素left:200px+width:100%左边元素绝对+右边元素margin-left不需要设置父元素高度，设置子元素高度，右边子元素margin-left:200px+width:100%float将左边的元素向左浮动，右边的元素在没有父元素的情况下不需要固定。左边元素需要设置宽高和浮动，右边元素可以设置高度。左元素可以向左浮动，右元素可以在没有父元素的情况下向右浮动。而width(width:calc(100%-200px))flex布局需要一个父元素进行flex布局，需要给它一个高度（展开容器）.father{display:flex;height:200px;}.right{flex:1;}grid布局是一种高级布局方式，子元素不需要设置宽度，只需要设置父元素的属性即可。.grid{显示：网格；网格模板列：200px100%；height:200px;}双元素+absolute需要给子元素设置宽高，否则不支持。右边元素设置left:200px.father{position:relative;height:200px;}.left{position:absolute;height:200px;}.right{position:absolute;左：200px；高度：200px；宽度：100%；}左元素绝对+右元素margin-left.father{position:relative;height:200px;}.left{position:absolute;宽度：200px；高度：200px;}.right{宽度：100%;高度：200px；margin-left:200px;}无父元素+左元素向左浮动，右元素不移动前两个需要有父元素，但是floating不需要向左浮动，下一个元素占独占position，和line一样，需要设置height，子元素才能打开。左{浮动：左；height:200px;}.right{height:200px;}无父元素+left左边浮动，右边浮动不需要父元素，float和普通文档流不一样我的理解是普通文档流是二维的，而浮动就相当于三维的。不同的是Z轴右侧的元素浮动不够，需要设置宽度。左{浮动：左；height:200px;}.right{浮动：右；高度：200px；width:calc(100%-200px);}只要是float就可以实现这个功能，不需要父元素，需要自己设置高度。简而言之，实现布局的最佳方式是flex，轻松兼容现代浏览器和模型。当然是因为我没学过grid（不过grid要记住的参数比较多）。绝对定位和浮动各有优缺点。每种主要方法的优点和缺点你需要什么？flex布局简单，需要父元素和高度。子项flex:1grid布局最简单，但兼容性更现代。您只需要在父元素上设置属性。绝对定位更兼容。它需要父元素做相对定位和高度浮动。兼容性更高。不需要父元素，子元素都需要。宽高float与其他三种不同，它不需要父元素作为容器Grid与其他三种不同，它不需要设置子元素（左元素）的宽度绝对定位不同于另外三个，它的方法不仅要求父元素有height，而且它的子元素也必须有highflex。附上最简单的在线demo。
