经典三列布局两侧定宽中间自适应

方式一：

利用flex布局 

      <style>
		    .all{display: flex;}
			.div1{width: 200px;background-color: #f00;height:300px;font-size:20px}
			.div2{flex:1;background-color: #0f0;height:300px;font-size:20px}
			.div3{width: 200px;background-color: #00f;height:300px;font-size:20px} 
			

		</style>
	
	<div class="all">
		<div class="div1">
			定宽200px
		</div>
		<div class="div2">
			自适应撑满剩下的空间
		</div>
		<div class="div3">
			定宽200px
		</div>
		
	</div>

 

 

方式二

看中间栏如何处理。我们知道对于float元素，其会脱离文档流，其他盒子也会无视这个元素。（但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。）所以此时只需在container容器内添加一个正常的div，其会无视left和right，撑满整个container，只需再加上margin为left right流出空间即可

		<style>
	
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: red;
        }
        .main{
            background: bisque;
            height: 200px;
            margin-left: 110px;
            margin-right: 110px
        }
        
        .right {
            float: right;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }
			
			
	</style>

       <div class="all">
            <div class="left">
                1111111
            </div>
            <div class="right">
                333333
            </div>
            <div class="main">
            
            </div>
            
        </div>
            

 

 

接下来再来

方式三 bfc布局

BFC(块格式化上下文)规则规定：BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可：

第一个应该是先渲染left right，然后中间那个middle后渲染，只能占据中间所有位置了。

所以此刻要注意right与middle的位置，如果是middle在前，right会另起一行，因为middle把left预留的位置占满了，所以right只能另起一行了

 .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: red;
        }
        .main{
            background: bisque;
            height: 200px;
            overflow: hidden;
        }
        
        .right {
            float: right;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }
       <div class="all">
            <div class="left">
                1111111
            </div>
            <div class="right">
                333333
            </div>
            <div class="main">
            
            </div>
            
        </div>

方式四

利用绝对定位 其实是考到bfc的应用

  .content{
       position: relative;
    }
    .left{
       position: absolute;
       left: 0;
       width: 200px;
       background: red;
    }
    .middle{
        background: green;
        overflow: hidden;
    }
    .right{
       position:absolute;
       right: 0;
        width: 200px;
        background: blue;
    }
  <div class="content">
        <div class="left">
            左
        </div>
        
        <div class="right">
            右
        </div>
   
        <div class="middle">
            中
        </div>
       

    </div>