一、浮動
傳統(tǒng)的網(wǎng)頁布局一般包含三種方式，標(biāo)準(zhǔn)流（普通流），浮動和定位。一個完整的頁面中這三種布局方式都有。標(biāo)準(zhǔn)流就是默認(rèn)的元素排列方式，之前所學(xué)習(xí)的標(biāo)簽都是按照標(biāo)準(zhǔn)流來布局的。
為什么我們需要浮動呢，因為有時候元素默認(rèn)的布局方式并不能滿足我們的要求。比如實現(xiàn)多個div元素的一行顯示，我們當(dāng)然可以將他們轉(zhuǎn)化為行內(nèi)塊元素，但是發(fā)現(xiàn)他們之間會存在一個小的空隙。又比如要實現(xiàn)兩個div元素，分別貼著瀏覽器的左右顯示，用標(biāo)準(zhǔn)流的方式就比較難實現(xiàn)。所以浮動就是為了解決標(biāo)準(zhǔn)流難以滿足的情況而出現(xiàn)的。
浮動的語法
選擇器 {float : 屬性值}
div {float : left/right/none}
上述代碼分別讓元素向左、右以及不浮動。浮動的元素包含以下幾個特點
1.浮動的元素會脫離標(biāo)準(zhǔn)流浮動到指定的位置，俗稱脫標(biāo)。
2.浮動的元素會在一行內(nèi)顯示并且頂部對齊，只有在寬度超出父元素的寬度的時候才會換行顯示
3.浮動的元素會具有行內(nèi)塊元素的特點，即可以設(shè)置寬高并且一行內(nèi)顯示多個。
有了浮動我們就可以實現(xiàn)上述我們的需求了，要實現(xiàn)一行內(nèi)顯示多個div元素，只需要在CSS中書寫
div {
height: 200px;
width: 200px;
background-color: pink;
float: left;
}
最后一行就是浮動的代碼，如果要實現(xiàn)左右分別對齊，只需要一個向左一個向右浮動即可。如果要間隔顯示，通過設(shè)置外邊距即可。
一般來說，浮動元素都是搭配標(biāo)準(zhǔn)流的父元素來使用的，比如這樣
有了浮動，就可以實現(xiàn)一些簡單的網(wǎng)頁布局比如下面這個布局模式
其代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
height: 50px;
background-color: gray;
}
.banner {
width: 980px;
height: 80px;
background-color: gray;
margin: 10px auto;
}
.box {
width: 980px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
.box li {
width: 237px;
height: 300px;
background-color: skyblue;
float: left;
margin-right: 10px;
}
.box .last {
margin-right: 0;
}
.footer {
height: 150px;
background-color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
注意CSS開頭的清除頁面內(nèi)外邊距以及清除無序列表的小圓點的代碼。
注意事項：1.網(wǎng)頁布局一般首先使用標(biāo)準(zhǔn)流將父元素上下排列，然后利用浮動排列子元素。
2.一個元素浮動，其兄弟元素也浮動。浮動的元素只會影響其后面的標(biāo)準(zhǔn)流，不會影響前面的標(biāo)準(zhǔn)流。
二、清除浮動
有時候我們會遇見不方便直接給定父元素高度的情況，比如我們不知道內(nèi)部的內(nèi)容有多大的篇幅的時候。這種時候我們可以不設(shè)置父元素的高度，由內(nèi)容來決定高度，但是內(nèi)容由子元素容納，如果子元素浮動那么父元素就沒有高度了，這樣顯然會導(dǎo)致頁面元素布局的混亂。為了消除浮動對標(biāo)準(zhǔn)流元素的影響，我們就需要清除浮動。清除浮動的方式有四種
1.額外標(biāo)簽法（隔墻法）
這是W3C的推薦做法，在每個浮動元素的后面額外加一個空標(biāo)簽，比如<div style=”clear:both”></div>，注意空標(biāo)簽必須是塊級元素。這樣左雖然簡單易懂，但是代碼中出現(xiàn)了大量無意義的標(biāo)簽，不利于結(jié)構(gòu)化。
2.給父元素添加 overflow
給父元素添加，將溢出部分隱藏。代碼簡潔但是會將溢出部分隱藏，有時候不能滿足要求。
3.:after 偽元素法
在父元素中添加下列代碼。關(guān)于什么是偽元素后面會進(jìn)行學(xué)習(xí)。
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 專有 */
*zoom: 1;
}
這種清除浮動的方法結(jié)構(gòu)簡單清晰，并且可以兼容低版本的瀏覽器。百度和網(wǎng)易使用的較多。
4.雙偽元素清除浮動
使用方法同上
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
這種方法小米和騰訊使用較多。
一張圖總結(jié)一下清除浮動的四種方法。
