CSS基礎知識之float

wuyangchun 發布于2019-08-30 13:06 / 3042人閱讀

摘要：前段時間寫過一篇基礎知識之，當時對的理解不太準確，被慕課網多名讀者指出原文已修正，如有誤導實在抱歉。浮動的基礎知識浮動有個屬性左浮動右浮動不浮動繼承。浮動元素脫離了標準文檔流，文字和行級元素會環繞該元素，塊級元素則不受影響。

前段時間寫過一篇CSS基礎知識之position，當時對float的理解不太準確，被慕課網多名讀者指出（原文已修正，如有誤導實在抱歉）。現對float進行更深入的學習，在此把學習心得分享給大家。

浮動的基礎知識

浮動有4個屬性：left（左浮動）、right（右浮動）、none（不浮動）、inherit（繼承）。

浮動元素的包含塊是其最近的塊級祖先元素。

浮動元素會左偏移（或右偏移），直到它的外邊界接觸到『包含塊的內邊界』或『另一個浮動元素的外邊界』。

浮動元素脫離了標準文檔流，文字和行級元素會環繞該元素，塊級元素則不受影響。

浮動一個非替換元素，必須為該元素聲明一個width，否則元素的寬度趨于0。

浮動元素的margin（外邊距）不會與其他元素的margin合并。

浮動的深入研究

浮動元素的頂邊不可以高于包含塊中先前產生的塊級元素或行級元素的頂。

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

浮動元素不能溢出包含塊的左、右、上邊界，僅可溢出下邊界。（浮動元素溢出下邊界時，部分瀏覽器會增加包含塊的高度，使浮動元素能夠包含在包含塊中，出現大片空白，導致瀏覽器兼容性問題。）

浮動元素設置負外邊距時，雖然浮動元素看起來溢出了包含塊，但實際并沒有違反上述規則。

特殊情況，浮動元素比包含塊更寬時，浮動元素會在偏移的反方向溢出。

浮動的負作用

背景不能顯示

邊框不能撐開

margin padding 不能正確顯示

清除浮動的方法

.clear-float1{ content: “”; display: block; clear: both; }
/* 方法1，當父包含塊縮成一條時無效 */

.clear-float2{ overflow:hidden; width:100%; }
/* 方法2，overflow:hidden屬性相當于是讓父級緊貼內容，這樣即可緊貼其對象內內容，從而實現了清除浮動。 */

.clear-float3{ overflow: auto; zoom: 1; }
/* 方法3，zoom是在處理兼容性問題，hidden和auto都能清除浮動，據說auto對seo更友好 */

擴展閱讀

《CSS權威指南》——第10章浮動和定位

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

非替換元素和替換元素

KB011: 浮動( Floats )

KB008: 包含塊( Containing block )

css清除浮動float的三種方法總結

歡迎來到石佳劼的博客，如有疑問，請在「原文」評論區留言，我會盡量為您解答。

云服務器 GPU云服務器之基礎篇黑客基礎之DOS 零基礎課程之c語言 css基礎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115310.html

CSS基礎入門之float

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

xinhaip 2019-08-30 10:59 評論0 收藏0
前端面試之CSS總結(上)

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

琛ｈ。 2019-08-29 11:18 評論0 收藏0
CSS基礎知識之position

摘要：最近在慕課網學習了網頁布局基礎和固定層效果，都是由聲音甜美的婧享人生老師所錄制，視頻詳細講解了中的用法，在此把學習筆記分享給大家。最近在慕課網學習了網頁布局基礎和固定層效果，都是由聲音甜美的婧享人生老師所錄制，視頻詳細講解了CSS中position的用法，在此把學習筆記分享給大家。 CSS定位機制標準文檔流（Normal flow）浮動定位（Floats）絕對定位...

xiaowugui666 2019-08-30 12:56 評論0 收藏0
sass筆記-2|Sass基礎語法之讓樣式表更具條理性和可讀性

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

CloudDeveloper 2019-08-30 13:10 評論0 收藏0