標籤：html 前端 css 網站設計 布局
1. 浮動(float)是基於CSS的現代Web設計用到的主要功能之一，可以用它來建立多累的網頁布局，從無序列表建立導航工具條，不是用table而建立類似表格的對其方式等。我個人認為我們可以這樣理解浮動(如有什麼不對的，歡迎指正)，在平常我們用到區塊層級元素的時候，如果我們將兩個區塊層級元素嵌套在一個div中，在正常情況下，這兩個區塊層級元素會從上到下一次排列，即一個在上，一個在下，如果我們希望做到將這兩個區塊層級元素排列在一排(在這兩個區塊層級元素的寬度相加沒有超過它們的父元素的寬度的情況下)，我們可以用float屬性對其進行設定。例子如下
<!DOCTYPE html><html><head><title>浮動</title><meta charset="utf-8" /><style type="text/css">.all{width: 250px;height: 250px;background-color: #faa;}.div1{width: 100px;height: 100px;background-color: #7BBD53;margin-left: 10px;/*添加浮動*/float: left;}.div2{width: 100px;height: 100px;background-color: yellow;margin-left: 10px;/*添加浮動*/float: left;/*必須兩處都添加浮動才能達到效果。*/}</style></head><body><div class="all"><div class="div1">div1</div><div class="div2">div2</div></div></body></html>在沒有添加浮動之前
添加向左浮動：
上述例子向右浮動的效果：
文本環繞的效果：
<!DOCTYPE html><html><head><title>圍繞文本</title><meta charset="utf-8" /><style type="text/css">span.text{width: 100px;margin:20px;background-color: #eea;font-weight: bold;float: right;}p{width: 300px;border: solid;border-width: 2px;border-color: #999;padding:30px;}</style></head><body><p><span class="text"> 華胥引華胥引華胥引</span><span>這是一個發生在亂世的故事。城破之日，衛國公主葉蓁以身殉國，依靠鮫珠死而複生。當她彈起華胥調，便生死人肉白骨，探入夢境與回憶。幻術構成的曲譜裡，儘是人生的辛酸與苦澀。而她與亡她國家的陳國世子，在一次幻境中相遇，身份兩重，緣也兩重。</span></p></body></html>效果：
4、清除浮動:clear(只能用於區塊層級元素)。在某些情況下，我們想浮動元素某一個邊的地區被清除，後續的元素從容器的正常位置開始顯示，這時候我們可以使用clear屬性阻止一個元素出現在浮動元素的後面。
<!DOCTYPE html><html><head><title>clear屬性</title><meta charset="utf-8" /><style type="text/css">img{float:left;margin-right: 10px;}h1{clear:left;top-margin:2em;}</style></head><body><div style="width:300px;height:600px;"><p><img src="tu.png">浮動是基於CSS的現代web設計用到的主要功能之一，它可以用來建立多列的網頁布局、導航工具條等。</p><h1>clear屬性清除浮動元素</h1><p>使用clear屬性群組織一個元素出現在元素的後面</p></div></body></html>使用clear清除浮動的影響之前：
使用clear清除浮動的影響之後：
CSS頁面配置基礎3——元素浮動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
