第三篇博客.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>希望大家可以动手实践，毕竟实践才是检验真理的唯一标准。
作者：瑾瑜爱上猫
链接：https://www.jianshu.com/p/bc5fe663d413
共同学习，写下你的评论
评论加载中...
作者其他优质文章
