CSS系列 浮動

2021-09-25 20:39:47 字數 1112 閱讀 3883

元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制,移動到其父元素中指定位置的過程。

css的定位機制有3種:普通流(標準流)、浮動和定位。

html語言當中另外乙個相當重要的概念----------標準流!或者普通流。普通流實際上就是乙個網頁內標籤元素正常從上到下,

從左到右排列順序的意思,比如塊級元素會獨佔一行,行內元素會按順序依次前後排列;

按照這種大前提的布局排列之下絕對不會出現例外的情況叫做普通流布局。

浮動首先建立包含塊的概念(包裹)。就是說, 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的範圍。 

浮動的元素排列位置,跟上乙個元素(塊級)有關係。如果上乙個元素有浮動,則a元素頂部會和上乙個元素的頂部對齊;如果上乙個元素是標準流,

則a元素的頂部會和上乙個元素的底部對齊。

由2可以推斷出,乙個父盒子裡面的子盒子,如果其中乙個子級有浮動的,則其他子級都需要浮動。這樣才能一行對齊顯示。

浮動脫離標準流,不佔位置,會影響標準流。浮動只有左右浮動。

元素新增浮動後,元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少

浮動根據元素書寫的位置來顯示相應的浮動。

總結:  浮動 --->  浮漏特       

浮:    加了浮動的元素盒子是浮起來的,漂浮在其他的標準流盒子上面。

漏:    加了浮動的盒子,不佔位置的,它浮起來了,它原來的位置漏 給了標準流的盒子。

特:    特別注意,這是特殊的使用,有很多的不好處,使用要謹慎。

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。

可以通過觸發bfc的方式,可以實現清除浮動效果。(bfc後面講解)

可以給父級新增: overflow為 hidden|auto|scroll  都可以實現。

.clearfix:after    

.clearfix   /* ie6、7 專有 */

.clearfix:before,.clearfix:after 

.clearfix:after

.clearfix

精簡高效CSS系列之二 浮動float

假如乙個頁面上有3個div塊,如下排列 圖1 不使用浮動 圖2 向右浮動 圖2說明了框1脫離了文件流向右移動,直到它的右邊緣碰到包含框的右邊緣為止。圖3 向左浮動 圖3說明了框1向左浮動,脫離文件流向左移動,直到它的左邊緣碰到框2的左邊緣為止,由於框1脫離了文件流,不佔據空間,框2處於文字流中,所以...

css學習 css浮動

1 文件流介紹 網頁布局的核心就是利用css來擺放盒子,把盒子擺放在合適的位置。css的定位機制有以下3種 網頁布局一般需要3種搭配使用 a 普通流 標準流 b 浮動 1 浮動只有左右。2 浮動後找離他最近的父元素靠左 右對齊。3 乙個父盒子裡的子盒子,如果其中乙個子元素有浮動的話,則其他子元素都需...

css浮動和清除浮動

css樣式的float浮動屬性,用於設定標籤物件 如 標籤盒子 標籤 標籤 標籤等html標籤 的浮動布局,浮動也就是我們所說標籤物件浮動居左靠左 float left 和浮動居右靠右 float right 一般情況是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣cs...