各种html布局

1) 两列布局 7+种

左边定宽 ，右边宽度自适应；

实现方法：

1,最基本

.left {display:inline-block；width：200px；height:300px}   

.right{height:300px；display:inline-block;width:calc(100% - 200px)

//强制换行

    word-wrap: break-word;

    word-break: normal;

}

2，float：

浮动元素脱离文档流，不占空间

包裹性：浮动元素变为块级元素

破坏性：元素浮动后可能导致父元素高度塌陷（因为浮动元素被从文档正常流中移除了，父元素当然还处在正常流中，所以父元素不能被浮动元素撑大）

清除浮动：

clear属性规定元素的哪一侧不允许有其他浮动元素。

取值：

• left:元素左侧不允许有浮动元素
• right:元素右侧不允许有浮动元素
• both:元素左右两侧均不允许有浮动元素
• none:默认值，允许浮动元素出现在两侧

 具体原理：在元素上外边距之上增加清除空间，比如清除左浮动会让元素的上外边距刚好在左边浮动元素的下外边距之下。

推荐：

1.1

.clearfix:after{
content:"";
display:block;
height:0;
overflow:hidden;
clear:both;
}
/*IE6和IE7*/
.clearfix{
*zoom:1;
}

1.2

.clearfix:after{
content:"";
display:table;
clear:both;
}
/*IE6和IE7*/
.clearfix{
*zoom:1;
}

float布局

1.1

.left { float：left ；width：200px；height:300px}   

right{height:300px； margin-left: 200px; 

//强制换行

    word-wrap: break-word;

    word-break: normal;

}

1.2

.left { float：left ；width：200px；height:300px}   

.right{width: calc(100% - 200px);//calc的减号两边必须有空格

 float: right;/*或者float:left*/

//强制换行

    word-wrap: break-word;

    word-break: normal;

}

1.3

.left { float：left ；width：200px；height:300px}   

.right{height:300px;overflow: hidden;}

这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖)

如果想避免元素被覆盖，可触第二个元素的 BFC 第三个特性，在第二个元素中加入 overflow: hidden即可

 BFC：(格式化上下文)  可参考https://zhuanlan.zhihu.com/p/25321647

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

 触发BFC：

只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

特性：

1. 同一个 BFC 下外边距会发生折叠 

2  BFC 可以包含浮动的元素（清除浮动）

3  BFC 可以阻止元素被浮动元素覆盖

3，position：绝对定位元素脱离文档流

 .left{

        position: absolute;

        width: 200px;

        left:0;

        top:0;

        height: 200px;

    }

 .right{

        position: absolute;

        right: 0;

        left:200px;

        height: 200px;

  //强制换行

    word-wrap: break-word;

    word-break: normal;

    }

3.1

.left{

        position: absolute;

        width: 200px;

        left:0;

        top:0;

        height: 200px;

    }

 .right{

        margin-left:200px;

        height: 200px;

  //强制换行

    word-wrap: break-word;

    word-break: normal;

    }

 

1+2也可以演变出多种方法实现  这里不一一列举。

 

3 flex

 .left{width:200px;height:200px}

  .right{flex:2; height: 200px; 

 width: 0;//右边内容不会挤左边内容

   //强制换行

    word-wrap: break-word;

    word-break: normal;

}

 

都会出现的问题：右边子内容不换行，需要强制换行或者设置子元素宽度

 

2）双飞翼布局：经典三列布局，也叫做圣杯布局

a、三列布局，中间宽度自适应，两边定宽；
b、中间栏要在浏览器中优先展示渲染；
c、允许任意列的高度最高；
d、要求只用一个额外的DIV标签；

实现方式

2.1最基本

.left{display:inline-block;width:200px;}

.center{display:inline-block;width:calc(100% - 400px)}

.right{display:inline-block;width:200px;}

2.2 float

2.2.1

.f{width:100%;display: flex;}

.left{float:left;width:200px;}

.center{float:left;width:100% }

.right{float:left;width:200px;}

 

2.2.2

.f{width:100%；}

.left{float:left;width:200px;}

.center{height:300px;margin-left: 200px;margin-right: 204px;

}

.right{float:right;width:200px;height: 200px;margin-top: -202px;

}

 

2.3 position 

.f{  width: 100%;position: relative;}

.center{

        width: 100%;
        background: pink;
      margin:0 200px 0 200px
    }
    .left{
       width: 200px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .right{
       width: 200px;
        position: absolute;
       top: 0;
      right:0
    }

2.3 flex
.f{width:100%;display: flex;}

.left{

        width:200px;

        height: 200px;      

       flex: 0 0 200px;//空间再小也不会缩小固定宽度的内容

    }

    .center{

        flex:1;  

    }

    .right{

        width:200px;

        height: 200px;

       flex: 0 0 200px;//空间再小也不会缩小固定宽度的内容

    }

 

 

2.4

    .box{
        height: 500px;
        background-color: bisque;
    }
    .box .box-content {
        height: 100%;
        float: left; /* 一定要设置浮动，要不下面的模块上不来 */
        width:100%;/* 一定要设置100%，要不内容不够称不开整个页面 */
        background-color: blue;  /* 默认还是整行 */
        } 
  
    .box .box-left { 
        width: 200px; float: left; 
        margin-left: -100%; /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */ 
        height: 300px; 
        background-color: green; 
        } 
    .box .box-right { 
        float: left; 
        width: 200px; 
        min-height: 100%; 
        margin-left: -200px;/* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */ 
        background-color: pink; 
        } 
    header{ height: 75px; background-color: aqua; } 


    <div class="box"> 
        <div class="box-content"></div>
        <div class="box-left"> 11dsdasdas不你弟弟呢单独 </div>
        <div class="box-right">12酷酷酷酷酷的的是计算机技术升级的历史记</div> 
    </div>