html+css实现左侧定宽，右侧自适应的布局

实现一侧定宽，一侧自适应的布局的方法a 、b

a、利用左侧元素浮动，或者绝对定位的方式使其脱离常规文档流 

1、利用float和margin来实现

css
<style>
.father{border:1px solid #444;overflow:hidden;}
.father img{60px;height:64px;float:left}
.father p{margin-left:70px;padding-right:20px;}
</style>

html
<div class="father">
<img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=e8e9a996dac451dae2fb04b9d7943903/b219ebc4b74543a9711acb0419178a82b80114f0.jpg" alt="">
<p>张艺兴，努力，努力，再努力！努力，努力，再努力！不知道干什么，我先干好自己现在手头的工作！</p>
</div>

浏览器(591 x  806)效果图：

2、利用float和css3中的calc

css

<style>
.container{overflow: hidden;height: 500px;margin: 10px 0;color:#fff;border:2px solid red;}
.container>div{height: 100%;float: left;}
.left{ 200px;background: pink;}
.right{background: #333;calc(100% - 200px);}
</style>

html

<div class="container">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>

3、利用定位position:absolute和margin来实现

css

<style>
.container{border:2px solid red;position:relative;height:200px;}
.left{200px;height:200px;background:pink;position:absolute;}
.right{height:200px;background:#333;margin-left:200px;}
</style>

 html

<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>

4、利用定位position来实现

css

<style>

.container{border:2px solid red;height:500px;color:#fff;overflow:hidden;position:relative;}
.container div {height:100%;}
.left{position: absolute;left: 0;top:0; 200px;background:pink;}
.right{position: absolute;left: 200px;top:0;right: 0;background:#333;}

</style>

html

<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>

 b、BFC（块级格式化上下文）BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响

5、float与overflow或者display:flex;

css

<style>
.container{border:2px solid red;height:500px;color:#fff;}
.left{200px;height:200px;background:pink;float:left;}
.right{height:200px;background:#333;overflow: auto; /*display:flex;*/ }
</style>

html

<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>

6、display:table来实现

<style>　

.container{height: 500px;margin: 10px 0;display: table; 100%;color:#fff;}
.container>div{height: 100%;display: table-cell;}
.left{ 100px;background: pink;}
.right{background: #333;}

</style>

html

<div class="container">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>

效果图