成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS基礎(chǔ)知識之float

wuyangchun / 3078人閱讀

摘要：前段時(shí)間寫過一篇基礎(chǔ)知識之，當(dāng)時(shí)對的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出原文已修正，如有誤導(dǎo)實(shí)在抱歉。浮動(dòng)的基礎(chǔ)知識浮動(dòng)有個(gè)屬性左浮動(dòng)右浮動(dòng)不浮動(dòng)繼承。浮動(dòng)元素脫離了標(biāo)準(zhǔn)文檔流，文字和行級元素會(huì)環(huán)繞該元素，塊級元素則不受影響。

前段時(shí)間寫過一篇CSS基礎(chǔ)知識之position，當(dāng)時(shí)對float的理解不太準(zhǔn)確，被慕課網(wǎng)多名讀者指出（原文已修正，如有誤導(dǎo)實(shí)在抱歉）。現(xiàn)對float進(jìn)行更深入的學(xué)習(xí)，在此把學(xué)習(xí)心得分享給大家。

浮動(dòng)的基礎(chǔ)知識

浮動(dòng)有4個(gè)屬性：left（左浮動(dòng)）、right（右浮動(dòng)）、none（不浮動(dòng)）、inherit（繼承）。

浮動(dòng)元素的包含塊是其最近的塊級祖先元素。

浮動(dòng)元素會(huì)左偏移（或右偏移），直到它的外邊界接觸到『包含塊的內(nèi)邊界』或『另一個(gè)浮動(dòng)元素的外邊界』。

浮動(dòng)元素脫離了標(biāo)準(zhǔn)文檔流，文字和行級元素會(huì)環(huán)繞該元素，塊級元素則不受影響。

浮動(dòng)一個(gè)非替換元素，必須為該元素聲明一個(gè)width，否則元素的寬度趨于0。

浮動(dòng)元素的margin（外邊距）不會(huì)與其他元素的margin合并。

浮動(dòng)的深入研究

浮動(dòng)元素的頂邊不可以高于包含塊中先前產(chǎn)生的塊級元素或行級元素的頂。

浮動(dòng)元素之間不可重疊，如果水平方向沒有足夠的空間放置浮動(dòng)元素，它將向下移動(dòng)，直到有足夠的空間或沒有更多的浮動(dòng)元素為止。

浮動(dòng)元素不能溢出包含塊的左、右、上邊界，僅可溢出下邊界。（浮動(dòng)元素溢出下邊界時(shí)，部分瀏覽器會(huì)增加包含塊的高度，使浮動(dòng)元素能夠包含在包含塊中，出現(xiàn)大片空白，導(dǎo)致瀏覽器兼容性問題。）

浮動(dòng)元素設(shè)置負(fù)外邊距時(shí)，雖然浮動(dòng)元素看起來溢出了包含塊，但實(shí)際并沒有違反上述規(guī)則。

特殊情況，浮動(dòng)元素比包含塊更寬時(shí)，浮動(dòng)元素會(huì)在偏移的反方向溢出。

浮動(dòng)的負(fù)作用

背景不能顯示

邊框不能撐開

margin padding 不能正確顯示

清除浮動(dòng)的方法 
.clear-float1{ content: “”; display: block; clear: both; }
/* 方法1，當(dāng)父包含塊縮成一條時(shí)無效 */

.clear-float2{ overflow:hidden; width:100%; }
/* 方法2，overflow:hidden屬性相當(dāng)于是讓父級緊貼內(nèi)容，這樣即可緊貼其對象內(nèi)內(nèi)容，從而實(shí)現(xiàn)了清除浮動(dòng)。 */

.clear-float3{ overflow: auto; zoom: 1; }
/* 方法3，zoom是在處理兼容性問題，hidden和auto都能清除浮動(dòng)，據(jù)說auto對seo更友好 */
擴(kuò)展閱讀

《CSS權(quán)威指南》——第10章 浮動(dòng)和定位

CSS基礎(chǔ)知識之position，了解塊級元素和行級元素，及定位基礎(chǔ)知識

非替換元素和替換元素

KB011: 浮動(dòng)( Floats )

KB008: 包含塊( Containing block )

css清除浮動(dòng)float的三種方法總結(jié)

歡迎來到 石佳劼的博客，如有疑問，請?jiān)凇冈摹乖u論區(qū) 留言，我會(huì)盡量為您解答。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115310.html

相關(guān)文章

  • CSS基礎(chǔ)入門之float

    摘要：在正常情況下，頁面總是從左到右，從上到下布局，這種被稱為正常的流。破壞文檔流這是最本質(zhì)的特性，因此設(shè)計(jì)的初衷就是破壞文檔流。但是也有一種情況是，浮動(dòng)元素前后并沒有內(nèi)聯(lián)元素，因此也就不存在行框盒子，這時(shí)候就是浮動(dòng)錨點(diǎn)在起作用。 前幾天有小伙伴說對float的學(xué)習(xí)云里霧里的，下面我就給大家說一下關(guān)于float的一些問題。 在css中，是存在流的概念的。在正常情況下，頁面總是從左到右，從上到...

    xinhaip 評論0 收藏0

  • 前端面試之CSS總結(jié)(上)

    摘要：重點(diǎn)介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結(jié) 由于最近在準(zhǔn)備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細(xì)，只是大致的描述一下，給自己提供一個(gè)知識輪廓。本篇中主要描述...

    琛ｈ。 評論0 收藏0

  • CSS基礎(chǔ)知識之position

    摘要：最近在慕課網(wǎng)學(xué)習(xí)了網(wǎng)頁布局基礎(chǔ)和固定層效果，都是由聲音甜美的婧享人生老師所錄制，視頻詳細(xì)講解了中的用法，在此把學(xué)習(xí)筆記分享給大家。 最近在慕課網(wǎng)學(xué)習(xí)了 網(wǎng)頁布局基礎(chǔ) 和 固定層效果 ，都是由聲音甜美的 婧享人生 老師所錄制，視頻詳細(xì)講解了CSS中position的用法，在此把學(xué)習(xí)筆記分享給大家。 CSS定位機(jī)制 標(biāo)準(zhǔn)文檔流（Normal flow） 浮動(dòng)定位（Floats） 絕對定位...

    xiaowugui666 評論0 收藏0

  • sass筆記-2|Sass基礎(chǔ)語法之讓樣式表更具條理性和可讀性

    摘要：這個(gè)時(shí)候小明如果僅僅引入不想改，那么就是這個(gè)值，如果他想改，就可以在任何一處重新聲明這個(gè)變量，那么就會(huì)變成小明的值。 這一篇主要詳述保持sass條理性和可讀性的3個(gè)最基本方法——嵌套、導(dǎo)入和注釋。 零. 變量 變量本身的作用是為了保持屬性值的可維護(hù)性，把所有需要維護(hù)的屬性值放在同一個(gè)地方，快速更改，處處生效，可謂售后無憂。 1.變量聲明 變量用$符號開頭進(jìn)行聲明，任何可以用作CSS屬性...

    CloudDeveloper 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<