CSS3清除浮動 保持浮層水平垂直居中
阿新 • • 發佈：2018-12-27
1）清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法
1、在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢位，為了防止這個現象的出現而進行清除浮動。
2、清除浮動的方法：
（1）使用clear:both。如果我們明確的知道緊接著浮動元素後面的元素，可以使用這種方法來清除浮動。這種方法簡單，容易使用，不需要hack，語義化也不錯。
（2）空div方法。這個方法一般是不推薦使用的，雖然沒有什麼副作用的，但因為這個div純粹是為了表現，沒有語義。
（3）對容器新增clearfix類會清除浮動
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
2）如何保持浮層水平垂直居中
a.利用flexbox佈局
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
display: flex;
justify-content:center; /* 水平居中 */
align-items:center; /* 垂直居中 */
/* flex-direction:column; */ /* 一列顯示 */
}
.children{
width: 100px;
height: 100px;
background-color: #eee;
border: 1px dashed #000;
margin: 5px;
/*如果children下面還有子元素的話，可以巢狀使用*/
/* display: flex;
justify-content: center;
align-items:center; */
}
b.利用絕對定位與transform
.parent{
position: absolute;
background-color: #eee;
width: 100%;
height: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}
c.將父元素定位，子元素絕對定位，利用margin負值為子元素寬高的一半來實現。
.parent{
position: relative;
background-color: #eee;
height: 600px;
width: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
d.利用定位與margin：auto
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
position: relative;
}
.children{
width: 100px;
height: 100px;
background-color: #eee;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
1、在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢位，為了防止這個現象的出現而進行清除浮動。
2、清除浮動的方法：
（1）使用clear:both。如果我們明確的知道緊接著浮動元素後面的元素，可以使用這種方法來清除浮動。這種方法簡單，容易使用，不需要hack，語義化也不錯。
（2）空div方法。這個方法一般是不推薦使用的，雖然沒有什麼副作用的，但因為這個div純粹是為了表現，沒有語義。
（3）對容器新增clearfix類會清除浮動
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
2）如何保持浮層水平垂直居中
a.利用flexbox佈局
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
display: flex;
justify-content:center; /* 水平居中 */
align-items:center; /* 垂直居中 */
/* flex-direction:column; */ /* 一列顯示 */
}
.children{
width: 100px;
height: 100px;
background-color: #eee;
border: 1px dashed #000;
margin: 5px;
/*如果children下面還有子元素的話，可以巢狀使用*/
/* display: flex;
justify-content: center;
align-items:center; */
}
b.利用絕對定位與transform
.parent{
position: absolute;
background-color: #eee;
width: 100%;
height: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}
c.將父元素定位，子元素絕對定位，利用margin負值為子元素寬高的一半來實現。
.parent{
position: relative;
background-color: #eee;
height: 600px;
width: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
d.利用定位與margin：auto
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
position: relative;
}
.children{
width: 100px;
height: 100px;
background-color: #eee;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}