CSS3的浮動(dòng)換行是一種非常有用的技術(shù)，能夠使網(wǎng)頁(yè)布局更為靈活。
浮動(dòng)是指元素在文檔流中脫離原本的位置，被移動(dòng)到其父容器的一側(cè)。當(dāng)一個(gè)元素浮動(dòng)之后，父容器將會(huì)調(diào)整自身的大小以適應(yīng)這個(gè)元素，同時(shí)其他元素也會(huì)被推到這個(gè)元素的下方或者另一側(cè)。
.box {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin-right: 10px;
}在上面的代碼中，我們將一個(gè)寬度為100像素，高度為100像素的
元素設(shè)置為了左側(cè)浮動(dòng)，同時(shí)在右側(cè)增加了10像素的外邊距。這個(gè)
元素的左側(cè)將會(huì)緊貼父容器，同時(shí)父容器將會(huì)根據(jù)這個(gè)元素的大小自適應(yīng)調(diào)整寬度。
當(dāng)多個(gè)元素設(shè)置了浮動(dòng)之后，它們將會(huì)從上到下或者從左到右排列。此時(shí)，我們可以使用CSS3中的“清除浮動(dòng)”技術(shù)，直接使浮動(dòng)元素下方跟著的元素?fù)Q行到下一行。例如：
.clear {
clear: both;
}在這個(gè)例子中，我們給某個(gè)元素添加了clear:both樣式，這表示這個(gè)元素會(huì)被強(qiáng)制換行，跳出浮動(dòng)的影響。
總的來(lái)說(shuō)，CSS3的浮動(dòng)換行技術(shù)是一種十分實(shí)用的技術(shù)，能夠幫助我們實(shí)現(xiàn)更靈活的網(wǎng)頁(yè)布局。但是需要注意的是，使用浮動(dòng)布局也可能會(huì)引發(fā)一些問題，比如重疊、脫離文檔流等等。因此我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)布局時(shí)，一定要謹(jǐn)慎使用，避免出現(xiàn)問題。
上一篇css3 泡沫