一.標準文檔流：指元素根據塊元素或行內元素的特性按從上到下，從左到右的方式自然排列。這也是元素默認的排列方式

??二.display屬性

???display:更改塊級元素和行內元素的相互轉換
??????????? block：塊級元素的默認值
??????????? inline：行內元素的默認值
??????????? inline-block:同時具有行內和塊級元素的特性
??????????? none：隱藏元素內容

??????? 三.float浮動

??????? ?left?元素向左浮動
???right?元素向右浮動
???none?默認值。元素不浮動，并會顯示在其文本中出現的位置
???<style type="text/css">
????.layer01{
?????float: left;
????}
????.layer02{
?????float: right;
????}

???</style>

??四.clear清除浮動

???left?在左側不允許浮動元素
???right?在右側不允許浮動元素
???both?在左、右兩側不允許浮動元素
???none?默認值。允許浮動元素出現在兩側
???<style type="text/css">
????.layer01{
?????clear:left;
????}
????.layer01{
?????clear:right;
????}
????.layer01{
?????clear:both;
????}
???</style>

??五.解決父級邊框塌陷的方法

???1.浮動元素后面加空div
????<div class="layer05">
????<style type="text/css">
?????.layer05{
??????clear: both;
?????}

????</style>

???2.設置父元素的高度
????<style type="text/css">
?????#father{
??????height: 500px;
?????}
????</style>

???3.父級添加overflow屬性
????visible?默認值。內容不會被修剪，會呈現在盒子之外
????hidden?內容會被修剪，并且其余內容是不可見的
????scroll?內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內容
????auto?如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容
????<style type="text/css">
?????#father{
??????overflow: hidden;
?????}
????</style>

???4.父級添加偽類after
????<div id="father" class="clear"></div>
????<style type="text/css">
?????.clear:after{
???????? content: '';????????? /*在clear類后面添加內容為空*/
???????? display: block;????? /*把添加的內容轉化為塊元素*/
???????? clear: both;???????? /*清除這個元素兩邊的浮動*/
?????}
????</style>

??六.inline-block和float的區別

???display:inline-block
???可以讓元素排在一行，并且支持寬度和高度，代碼實現起來方便
???位置方向不可控制，會解析空格
???IE 6、IE 7上不支持
???float
???可以讓元素排在一行并且支持寬度和高度，可以決定排列方向
???float 浮動以后元素脫離文檔流，會對周圍元素產生影響，必須在它的父級上添加清除浮動的樣式

?

轉載于:https://www.cnblogs.com/1314Justin/p/9206997.html

總結

以上是生活随笔為你收集整理的CSS3中的浮动的全部內容，希望文章能夠幫你解決所遇到的問題。

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