DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS清除浮動
CSS清除浮動
編輯:CSS詳解     

CSS清除浮動


浮動的特性:

浮動元素有左浮動(float:left)和右浮動(float:right)兩種

浮動的元素會向左或向右浮動,碰到父元素邊界、其他元素才停下來

相鄰浮動的塊元素可以並在一行,超出父級寬度就換行

浮動讓行內元素或塊元素自動轉化為行內塊元素(此時不會有行內塊元素間隙問題)

浮動元素後面沒有浮動的元素會占據浮動元素的位置,沒有浮動 的元素內的文字會避開浮動的元素,形成文字饒圖的效果

父元素如果沒有設置尺寸(一般是高度不設置),父元素內整體浮動的元素無法撐開父元素,父元素需要清除浮動

浮動元素之間沒有垂直margin的合並


三種方式清除浮動:

父級上增加屬性overflow:hidden

在最後一個子元素的後面加一個空的div,給它樣式屬性 clear:both(不推薦)

使用成熟的清浮動樣式類,將clearfix添加到浮動元素的父級元素中

? 1 2 3 4 5 6 7 8 9 10 11 12 13 .clearfix:after, .clearfix:before{     content: '';     display: table; }   .clearfix:after{     clear: both; }   .clearfix{     /*兼容低版本的IE浏覽器*/     zoom: 1; }
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved