CSS浮動布局

浮動布局

浮動是CSS布局中經常使用的一種手段，其實說白了就是使元素進行漂浮脫離正常的文檔流排列機制，實現一堆原本的block狀態的標簽可以并排顯示，當然這也可以使用display:inline-block進行實現，但是通常情況我們不會那么做。

那么在使用浮動時我們應該注意下面的幾點。

1.浮動應該發生在一個大盒子內部

2.浮動元素會影響后面文檔流排列元素

3.浮動元素會自動轉為inline-block狀態，這意味著原本的inline元素可設置寬高，而原本的block元素不會獨占一行

4.浮動元素會在父盒子的content區域中，不會超出父盒子的padding區域

5.當一個父盒子中所有元素都進行浮動，那么父盒子會丟失高度

使用浮動

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

選項

說明

left

向左浮動

right

向右浮動

none

不浮動

文檔流排列

文檔流排列就是自上向下的一種排列方式，對于block元素來說，它應該是獨占一行的。

Document

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。