第三篇博客.png
清除浮动、左边宽度固定右边自适应、水平垂直居中这三个知识点是我们经常在开发过程中需要用到的。不但经常用到，而且经常出现在面试题当中，所以对这三者进行知识总结很有必要。
1.清除浮动
提问：为什么要清除浮动了？
答案：如果一个父元素的所有子元素都设置了浮动，那么父元素的高度就出现了“塌陷”现象，本来预期的是想要通过子元素的高度来撑起父元素的高度，意味着子元素的浮动设置使子元素跑到父元素外面了，这个时候问题就出现了······
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高度塌陷</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
父元素高度塌陷如下：
问题.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）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高度塌陷</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
</body>
</html>
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）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左边长度固定右边自适应-margin-left</title>
<style>
.box1{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2{
height: 100px;
background-color: blue;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
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）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左边长度固定右边自适应-display:table</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
2.4 display:flex（父元素设置display:flex,左区域设置float:left,右区域设置flex:1）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左边长度固定右边自适应-display:flex</title>
<style>
.box{
flex: 1;
display: flex;
}
.box1{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2{
height: 100px;
flex: 1;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
3.水平垂直居中
提问：什么是水平垂直居中？
回答：网页设计当中往往讲究对称美，于是水平垂直居中的应用场景就非常多，子div相对于父div水平垂直居中，又或者内联元素的居中。
3.1 不定宽高的三种方式
3.1.1 margin:auto
<!DOCTYPE html>
<html>
<head>
<title>水平垂直居中</title>
<meta charset="utf-8">
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>
</html>
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）
<!DOCTYPE html>
<html>
<head>
<title>水平垂直居中</title>
<meta charset="utf-8">
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>
</html>
3.2 定宽高（margin-left:-width/2,margin-top:-width/2,top:50%,left:50%）
<!DOCTYPE html>
<html>
<head>
<title>水平垂直居中</title>
<meta charset="utf-8">
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>
</html>
希望大家可以动手实践，毕竟实践才是检验真理的唯一标准。
网友评论