浮動(dòng)
塊元素在文檔流中默認(rèn)垂直排列，如果希望塊元素在頁面中水平排列，可以使塊元素脫離文檔流汽烦，使用float來使元素浮動(dòng)，從而脫離文檔流莉御。
none: 默認(rèn)值撇吞，元素默認(rèn)在文檔流中排列
left: 元素會(huì)立即脫離文檔流，向頁面的左側(cè)浮動(dòng)
right: 元素會(huì)立即脫離文檔流礁叔，向頁面的右側(cè)浮動(dòng)
當(dāng)為一個(gè)元素設(shè)置浮動(dòng)以后牍颈，元素會(huì)立即脫離文檔流，它下面的元素會(huì)立即向上移動(dòng)琅关，元素浮動(dòng)以后煮岁，會(huì)盡量向頁面的左上或者是右上浮動(dòng)，直到遇見父元素的邊框或者其他的浮動(dòng)元素涣易，如果浮動(dòng)元素上邊是一個(gè)沒有浮動(dòng)的塊元素人乓，則浮動(dòng)元素不會(huì)超過塊元素，浮動(dòng)的元素不會(huì)超過他上邊的兄弟元素都毒，最多最多一邊齊色罚。
浮動(dòng)2
- 浮動(dòng)的元素不會(huì)蓋住文字，文字會(huì)自動(dòng)環(huán)繞在浮動(dòng)元素的周圍账劲，所以我們可以通過浮動(dòng)來設(shè)置文字環(huán)繞圖片的效果戳护。
div {
height: 200px;
background-color: aqua;
}
在文檔流中金抡，子元素的寬度默認(rèn)占父元素的全部。
div {
background-color: aqua;
float: left;
}
當(dāng)元素設(shè)置浮動(dòng)以后腌且，會(huì)完全脫離文檔流梗肝，塊元素脫離文檔流以后，高度和寬度都被內(nèi)容撐開铺董。
span {
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
開啟span的浮動(dòng)巫击，內(nèi)聯(lián)元素脫離文檔流以后會(huì)變成塊元素。
高度塌陷問題
<div class="box1">
<div class="box2">
</div>
</div>
在文檔流中精续，父元素的高度默認(rèn)是被子元素?fù)伍_的坝锰，也就是子元素多高，父元素就多高重付。
但是當(dāng)為子元素設(shè)置浮動(dòng)以后顷级，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度确垫，導(dǎo)致父元素的高度塌陷弓颈，由于父元素的高度塌陷了，則父元素下的所有元素都會(huì)向上移動(dòng)删掀，這樣將會(huì)導(dǎo)致頁面布局混亂翔冀。
所以在開發(fā)中一定要避免出現(xiàn)高度塌陷的問題，我們可以將父元素的高度寫死披泪，以避免塌陷的問題出現(xiàn)纤子，但是一旦高度寫死，父元素的高度將不能自動(dòng)適應(yīng)子元素的高度付呕，所以這種方案是不推薦使用的计福。
根據(jù)W3C的標(biāo)準(zhǔn)跌捆，在頁面中元素都有一個(gè)隱含的屬性叫做Block Formatting Context 簡(jiǎn)稱BFC徽职，該屬性可以設(shè)置打開或者關(guān)閉，默認(rèn)是關(guān)閉的佩厚。
當(dāng)開啟元素的BFC以后姆钉，元素將會(huì)具有如下特性。
- 父元素的垂直外邊距不會(huì)和子元素重疊
- 開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
- 開啟BFC的元素可以包含浮動(dòng)的子元素
如何開啟BFC
- 設(shè)置元素浮動(dòng)
- 使用這種方式開啟抄瓦，雖然可以撐開父元素潮瓶，但是會(huì)導(dǎo)致父元素的寬度丟失，而且使用這種方式也會(huì)導(dǎo)致下邊的元素上移钙姊，不能解決問題毯辅。
- 設(shè)置元素絕對(duì)定位
- 設(shè)置嚴(yán)肅為inline-block
- 可以解決問題，但是會(huì)導(dǎo)致寬度丟失煞额，不推薦使用這種方式
- 元素的overflow設(shè)置為一個(gè)非visible
推薦方式：將overflow設(shè)置為hidden是副作用最小的開啟BFC的方式
最推薦的方式：
.box1 {
border: 2px solid red;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellowgreen;
float: left;
}
.box1::after {
content: "";
display: block;
clear: both;
}
導(dǎo)航條
html文件
<body>
<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">聯(lián)系</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</body>
CSS文件
* {
margin: 0px;
padding: 0px;
}
.nav {
list-style: none; /*去除項(xiàng)目符號(hào)*/
width: 1200px;
margin: 0 auto;
background-color: #6495ED;
overflow: auto; /*解決高度塌陷*/
margin-top: 300px;
}
.nav li {
float: left;
width: 25%;
}
.nav li a {
display: inline-block;
width: 100%;
text-align: center; /*文字居中*/
padding: 5px 0px;
text-decoration: none; /*去除下劃線*/
color: white;
font-weight: bold;
}
.nav li a:hover {
background-color: #cc0000;
}
