??文檔流：
由于網頁默認是一個二維平面，當我們在網頁中一行行擺放標簽時，塊標簽會獨占一行，行標簽則只占自身大小，這種情況下要實現網頁布局就很麻煩了，所以我們就需要通過一些方法來改變這種默認的布局方式！
??浮動：
CSS中的浮動屬性可以讓標簽脫離原來的文檔流，也就是二維平面，浮動后的標簽默認是內容的大小，且可以為其設置寬和高。
??語法：float：left(向左浮動)? /? right(向右浮動)? /? none(不浮動)
??存在問題：
?浮動后的標簽不占用原來文檔流的空間，下面的標簽就會向上移動，會影響后面的網頁布局。
??如何解決浮動問題？
?1. 為父級標簽設置高度，將父級標簽撐開。
?2. 在浮動的標簽后使用清除浮動屬性，自動讓父級標簽撐開（推薦）
??實戰練習：
?.?例如我們做一個導航欄，如圖所示：
第一步：用4個<div>標簽來修飾內容并通過css設置背景顏色和文字顏色
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>.content{//設置文字顏色和背景顏色color: antiquewhite;background-color: #50536e; }</style></head><body><div class="content">消息</div><div class="content">動態</div><div class="content">收藏</div><div class="content">投稿</div></body> </html>
第二步：通過css的浮動屬性，讓4個<div>漂浮在一行，且浮動后的div標簽默認是內容大小
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e;//向左浮動float: left;}</style></head><body> <div class="content">消息</div><div class="content">動態</div><div class="content">收藏</div><div class="content">投稿</div></body> </html>
第三步：為浮動后的4個<div>標簽設置寬和高，并使文本內容居中
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e; float: left;//設置寬高以及文本居中text-align: center;width: 150px;height: 50px;line-height: 50px; }</style></head><body><div class="content">消息</div><div class="content">動態</div><div class="content">收藏</div><div class="content">投稿</div> </body> </html>
第四步：使這4個<div>標簽整體在頁面上居中。需要在這4個div標簽外部再套一個div標簽，
并設置這個父級div標簽寬度=4*子級div標簽寬度，通過margin: 0% auto;使其居中即可。? 🎀?這里只有讓父級div標簽寬度=4*子級div標簽寬度 才能實現居中，否則該父級div標簽是默認占一整行的，無法通過margin: 0% auto;使其居中.
📖?不了解margin屬性的小伙伴可以參考之前 CSS：盒子模型 的文章：
CSS：盒子模型-CSDN博客
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e;float: left;text-align: center;width: 150px;height: 50px;line-height: 50px; }.head{width: 600px;margin: 0% auto;} </style></head><body><div class="head"><div class="content">消息</div><div class="content">動態</div><div class="content">收藏</div><div class="content">投稿</div></div></body> </html>
第五步：清除浮動影響；即在浮動標簽后添加一個clear屬性修飾的空div標簽即可。
? ? ? ?? ? ?注意是在浮動的標簽后添加，不要添加到父級標簽之后了!
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><style>.content{color: antiquewhite;background-color: #50536e;float: left;text-align: center;width: 150px;height: 50px;line-height: 50px; }.head{width: 600px;margin: 0% auto;} </style></head><body> <div class="head"><div class="content">消息</div><div class="content">動態</div><div class="content">收藏</div><div class="content">投稿</div><div style="clear: left;"></div><!-- 清除浮動影響 --></div> </body> </html>清除浮動后，在之后的網頁布局中下面的標簽就不會向上移動了；例如我們在這個導航欄后添加一個標題標簽<h1>標題<h1>測試下：
這是不清除浮動效果的結果：
?本次的分享就到此為止了，希望我的分享能給您帶來幫助，創作不易也歡迎大家三連支持，你們的點贊就是博主更新最大的動力！
如有不同意見，歡迎評論區積極討論交流，讓我們一起學習進步！
有相關問題也可以私信博主，評論區和私信都會認真查看的，我們下次再見
海漫浩浩,我亦苦作舟!大家一起學習,一起進步!? 本人微信：g2279605572
)
； // 創建逆運動學求解器)
)
