建站專提News

CSS的clear屬性清除浮動的基本用法示例

一佰互聯網站開發設計(www.fuvitn.tw) 發布日期 2019-04-21 17:23:36 瀏覽數: 70

什么是CSS清除浮動?
網絡上流行的說法是:在非IE瀏覽器(如Firefox)下,當容器的高度(height)為auto,且容器的內容中有浮動(float為left或right)的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢出到容器外面而影響(甚至破壞)布局的現象。這個現象叫浮動溢出,為了防止這個現象的出現而進行的CSS處理,就叫CSS清除浮動。

使用 clear 樣式清除
樣例:

CSS Code復制內容到剪貼板
  1. .clear-float {clear:both;}   

clear 屬性是 CSS 1 就提供的用來清除浮動的樣式,設置了 clear 屬性的元素,其上邊框位置會緊貼浮動元素的 margin-bottom 邊界位置渲染,忽略其 margin-top 設置。這樣,父容器高度未設定(值是 auto)時,由于定義的清理浮動樣式元素所在位置處于浮動元素之下,容器計算后的實際高度就包含了浮動元素。

實例
在代碼中添加了div4,并設置寬高300px,灰色背景色,代碼如下

HTML代碼:

XML/HTML Code復制內容到剪貼板
  1. <div class="div4">  
  2.     div4   
  3. </div>  

CSS代碼:

CSS Code復制內容到剪貼板
  1. .div4 {   
  2.     width300px;   
  3.     height300px;   
  4.     background-color: darkgray;   
  5. }  

效果如下:

1.被紅色線條圈起來的就是div4,大家會發現個問題,就是div4依然是從左上角的點進行排布的,但是文字卻沒有在左上角的位置,這個就是浮動會帶來的問題。
2.如果我們想要實現div4貼在div2下面和div3右側的效果,就同時也需要給div4設置float: left屬性描述
但是我們并不想要這種效果,而是想要讓div4在下面重新排布,而不跟著div1、div2、div3他們浮動,這時候,我們就需要清除浮動了

CSS Code復制內容到剪貼板
  1. .div4 {   
  2.     width300px;   
  3.     height300px;   
  4.     background-color: darkgray;   
  5.     clearboth;   
  6. }  

只需要添加clear: both;屬性,就可以清除浮動了。

效果如下:

清除浮動之后,div4就可以從下面自己排列了,不會再參與上面幾個div的浮動。這就是所謂的清除浮動。

一佰互聯是全國知名建站品牌服務商,我們有九年網站建設、網站制作、網頁設計、php開發和域名注冊及虛擬主機服務經驗,提供的自助建站服務更是全國有名。近年來還整合團隊優勢自主開發了可視化多用戶”巔云建站系統“3.0平臺版,拖拽排版網站制作設計,輕松實現pc站、手機微網站、小程序、APP一體化全網營銷網站建設 ,已成功的為全國上百家網絡公司提供自助建站平臺搭建服務。

相關新聞more

04
04月
微信公眾號申請最新流程

簡介:一.公眾號申請流程在PC瀏覽器上打開微信公眾平臺官網(1) 點擊右上角"立即注冊"(2) 選擇注冊的帳號類型:訂閱... >>詳情

01
11月
制作企業網站的要根據什么來進行?

在制作企業網站的時候要根據什么來進行著手?這個問題想必很多人都沒有答案,網站可以讓用戶與公司進行彼此交流,不論是什么網站都務必專注于客戶體驗... >>詳情

22
04月
docker中的環境變量使用與常見問題解決方

前言docker可以為容器配置環境變量。配置的途徑有兩種: 在制作鏡像時,通過ENV命令為鏡像增加環境變量。在容器啟動時使用該環境變量。 ... >>詳情

14
05月
seo排名教程_巔云建站

ta charset="UTF-8"> seo排名教程_巔云建站 a:hover, a:focus,.post-like.acti... >>詳情

高端網站建設

美工兼顧SEO,為企業電子商務營銷助力!

電話:

023-85725751
建站

產品

域名注冊 虛擬主機 云服務器 企業郵局
智能建站 APP打包 微站/小程序 創業平臺
網站推廣 媒體營銷 智能采集 AI機器人
400電話 短信營銷 店銷機器人
私人定制 門戶網站
个半单双中特