|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 這篇文章給大家介紹的內容是關于CSS如何清除浮動?css清除浮動的五種方法總結,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。方法一(使用空標簽帶clear屬性) 標簽可以是div br hr 在浮動元素后使用一個空元素如<p class="clear"></p>,并在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />或<hr class="clear" />來進行清理。 優點:簡單,代碼少,瀏覽器兼容性好。 缺點:需要添加大量無語義的html元素,代碼不夠優雅,后期不容易維護。 在浮動元素下加<p class="clear"></p> .clear{ height:0px;font-size:0;clear:both;},但是在ie6下,塊元素有最小高度,即當height<19px時,默認為19px 解決方法:font-size:0;或overflow:hidden; 在浮動元素下加<br clear="all">用以清除浮動 方法二(給浮動元素的父元素添加overflow屬性)解決了通過空標簽元素清除浮動而不得不增加無意代碼的弊端。 使用該方法是只需在需要清除浮動的元素中定義CSS屬性:overflow:auto overflow:auto;是讓高度自適應,zoom:1;是為了兼容IE6,也可以用height:1%;的方式解決, 注意:zoom不符合W3C標準。overflow:hidden也可以實現。 <ul style="overflow:auto;zoom:1> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> 方法三:(給浮動的元素的容器添加浮動,即為父級添加float來清除浮動) <div style="float: right;background-color: #1a1a1a;"> <div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;"> </div> <div style="width: 500px;height: 200px;background-color: #8a6d3b"> </div> </div> 給浮動元素的容器也添加上浮動屬性即可清除內部浮動 缺點:會使其整體浮動,影響布局,不推薦使用。 方法四: (使用after偽對象清除浮動) after 偽元素(注意這不是偽類,而是偽元素,代表一個元素之后最近的元素)和 IEhack ,可以完美兼容當前主流的各大瀏覽器,這里的 IEhack 指的是觸發 hasLayout。 通過after偽元素實現元素末尾添加一個看不見的塊元素(Block element)清理浮動。 通過CSS偽元素在容器的內部元素最后添加了一個看不見的空格""或點".",并且賦予clear屬性來清除浮動。需要注意的是為了IE6和IE7瀏覽器,要給clearfix這個class添加一條zoom:1;觸發haslayout。 after偽對象非IE瀏覽器支持,所以并不影響到IE/WIN瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。 一、該方法中必須為需要清除浮動元素的偽對象中設置height:0,否則該元素會比實際高出若干像素; 二、content屬性是必須的,但其值可以為空,討論該方法的時候content屬性的值設為".", <style type="text/css">
.listinfo:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
<ul class="listinfo">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>方法五:使用鄰接元素處理 什么都不做,給浮動元素后面的元素添加clear屬性。 方法與添加一個空標簽類似,只是此處用浮動元素緊鄰的元素 使用情況: 在網頁主要布局時使用:after偽元素方法并作為主要清理浮動方式; 在小模塊如ul里使用overflow:hidden;(留意可能產生的隱藏溢出元素問題); 如果本身就是浮動元素則可自動清除內部浮動,無需格外處理; 正文中使用鄰接元素清理之前的浮動。 使用相對完美的:after偽元素方法清理浮動,文檔結構更加清晰; BUG修正: (1)、雙倍邊距bug處理 IE6 時,另一個需要記住的事情是,如果在和浮動方向相同的方向上設置外邊距(margin),會引發 快速修正:給浮動設置 display:inline; 而且不用擔心,它依然是塊級元素。 快速修正:在受影響的文本上設置寬度或高度。 快速修正:用父元素的底內補白(padding)代替。 相關推薦: css中定位問題:絕對定位、相對定位、fixed和static 以上就是CSS如何清除浮動?css清除浮動的五種方法總結的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!