2018-05-23 清除浮动、左边固定右边自适应、水平垂直居中

第三篇博客.png

清除浮动、左边宽度固定右边自适应、水平垂直居中这三个知识点是我们经常在开发过程中需要用到的。不但经常用到，而且经常出现在面试题当中，所以对这三者进行知识总结很有必要。

1.清除浮动

提问：为什么要清除浮动了？
答案：如果一个父元素的所有子元素都设置了浮动，那么父元素的高度就出现了“塌陷”现象，本来预期的是想要通过子元素的高度来撑起父元素的高度，意味着子元素的浮动设置使子元素跑到父元素外面了，这个时候问题就出现了······

    
    

    
        .container{            width: 500px;            border:1px solid #e8e8e8;
        }        .left{            float: left;            width: 200px;            height: 200px;            background-color: green;
        }        .right{            float: right;            width: 200px;            height: 300px;            background-color: blue;
        }    
    
        
        
     

父元素高度塌陷如下：

问题.png

1.1 使用伪元素（父元素添加伪元素）

.container:after{    display: block;    clear: both;    content:"";
}

1.2 overflow:hidden（父元素添加overflow:hidden）

.container{    width: 500px;    border:1px solid #e8e8e8;    overflow: hidden;
}

1.3 在子元素最后添加额外元素（额外元素添加clear:both）

    
    

    
        .container{            width: 500px;            border:1px solid #e8e8e8;
        }        .left{            float: left;            width: 200px;            height: 200px;            background-color: green;
        }        .right{            float: right;            width: 200px;            height: 300px;            background-color: blue;
        }        .clear{            clear: both;
        }    
    
        
        
        
     

1.4 为父元素设置高度（不明智的方式，要求子元素的高度相同）

.container{    width: 500px;    height: 200px;    border:1px solid #e8e8e8;
}.left{    float: left;    width: 200px;    height: 200px;        background-color: green;
}.right{    float: right;    width: 200px;    height: 200px;    background-color: blue;
}

1.5 overflow:auto（为父元素设置overflow:auto）

.container{    width:100%;    border:1px solid #e8e8e8;    overflow: auto;
}

1.6 float（为父元素设置浮动属性，不建议，因为页面中将会有越来越多的浮动元素）

.container{    width: 500px;    border:1px solid #e8e8e8;    float: left;
}

1.7 display:table（将父元素display的方式设置为table）

.container{    width: 500px;    border:1px solid #e8e8e8;    display: table;
}

2.左边固定右边自适应

提问：什么是左边固定右边自适应？
回答：左边固定右边自适应是一种经常在网页中采用的布局，要求是左边往往是导航栏，右边的宽度是需要根据屏幕尺寸来进行自适应的，左右区域的高度可以不同。

2.1 margin-left（右区域设置margin-left，左区域float：left）

    
    
    
        .box1{            float: left;            width: 100px;            height: 100px;            background-color: red;
        }        .box2{            height: 100px;            background-color: blue;            margin-left: 100px;
        }    
    
    

2.2 overflow:auto（右区域设置overflow:auto，左区域float:left）

.box1{    float: left;    width: 100px;    height: 100px;    background-color: red;
}.box2{    overflow: auto;    height: 100px;    background-color: blue;
}

2.3 添加父元素（父元素设置display:table，左右区域都设置为display:table-cell）

    
    
    
        .box{            width: 100%;            display: table;
        }        .box1{            width: 100px;            height: 100px;            display: table-cell;            background-color: red;
        }        .box2{            height: 100px;            display: table-cell;            background-color: blue;
        }    
    
        
        
    

2.4 display:flex（父元素设置display:flex,左区域设置float:left,右区域设置flex:1）

    
    
    
        .box{            flex: 1;            display: flex;
        }        .box1{            float: left;            width: 100px;            height: 100px;            background-color: red;
        }        .box2{            height: 100px;            flex: 1;            background-color: blue;
        }    
    
        
        
    

3.水平垂直居中

提问：什么是水平垂直居中？
回答：网页设计当中往往讲究对称美，于是水平垂直居中的应用场景就非常多，子div相对于父div水平垂直居中，又或者内联元素的居中。

3.1 不定宽高的三种方式

3.1.1 margin:auto

    
    
    
        .container{            width: 200px;            height: 200px;            position: relative;            border:1px solid #e8e8e8;
        }        .inner{            width: 100px;            height: 100px;            position: absolute;            top: 0;            bottom: 0;            left: 0;            right: 0;            margin: auto;            background-color: green;
        }    
    
        
    

3.1.2 transfrom:translate(50%,50%)（子元素添加该属性）

.inner{    width: 100px;    height: 100px;    position: absolute;    transform: translate(50%,50%);    background-color: green;
}

3.1.3 display:flex（父元素添加display:flex）

    
    
    
        .container{            width: 200px;            height: 200px;            border:1px solid #e8e8e8;            position: relative;            display: flex;            justify-content: center;            align-items: center;
        }        .inner{            width: 100px;            height: 100px;            background-color: green;
        }    
    
        
    

3.2 定宽高（margin-left:-width/2,margin-top:-width/2,top:50%,left:50%）

    
    
    
        .container{            width: 200px;            height: 200px;            border:1px solid #e8e8e8;            position: relative;
        }        .inner{            width: 100px;            height: 100px;            background-color: green;            position: absolute;            top:50%;            left: 50%;            margin-left: -50px;            margin-top: -50px;
        }    
    
        
    

希望大家可以动手实践，毕竟实践才是检验真理的唯一标准。

作者：瑾瑜爱上猫
链接：https://www.jianshu.com/p/bc5fe663d413