CSS浮動(dòng)布局

浮動(dòng)布局

浮動(dòng)是CSS布局中經(jīng)常使用的一種手段，其實(shí)說白了就是使元素進(jìn)行漂浮脫離正常的文檔流排列機(jī)制，實(shí)現(xiàn)一堆原本的block狀態(tài)的標(biāo)簽可以并排顯示，當(dāng)然這也可以使用display:inline-block進(jìn)行實(shí)現(xiàn)，但是通常情況我們不會(huì)那么做。

那么在使用浮動(dòng)時(shí)我們應(yīng)該注意下面的幾點(diǎn)。

1.浮動(dòng)應(yīng)該發(fā)生在一個(gè)大盒子內(nèi)部

2.浮動(dòng)元素會(huì)影響后面文檔流排列元素

3.浮動(dòng)元素會(huì)自動(dòng)轉(zhuǎn)為inline-block狀態(tài)，這意味著原本的inline元素可設(shè)置寬高，而原本的block元素不會(huì)獨(dú)占一行

4.浮動(dòng)元素會(huì)在父盒子的content區(qū)域中，不會(huì)超出父盒子的padding區(qū)域

5.當(dāng)一個(gè)父盒子中所有元素都進(jìn)行浮動(dòng)，那么父盒子會(huì)丟失高度

使用浮動(dòng)

對(duì)一個(gè)元素使用float就可以讓該元素飄起來，它可以指定以下一些方向。

選項(xiàng)

說明

left

向左浮動(dòng)

right

向右浮動(dòng)

none

不浮動(dòng)

文檔流排列

文檔流排列就是自上向下的一種排列方式，對(duì)于block元素來說，它應(yīng)該是獨(dú)占一行的。

Document

}article section:last-child{box-sizing:border-box;width:100px;height:100px;?}

總結(jié)

以上是生活随笔為你收集整理的css搜索框变圆脸角,CSS浮动布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。