浮動及其應用

2021-10-02 21:36:35 字數 3057 閱讀 4218

清除浮動

父級新增overflow屬性方法

浮動最早是用來控制,以便達到其他元素(特別是文字)實現「環繞」的效果。

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

在css中,通過float(漂浮)屬性來定義浮動,其基本語法格式如下:

選擇器
屬性值

描述left

元素向左浮動

right

元素向右浮動

none

元素不浮動(預設值)

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

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

由2可以推斷出,乙個父盒子裡面的子盒子,如果其中乙個子級有浮動的,則其他子級都需要浮動。這樣才能一行對齊顯示。
浮動脫離標準流,不佔位置,會影響標準流。浮動只有左右浮動。
元素新增浮動後,元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少
浮動根據元素書寫的位置來顯示相應的浮動。
總結: 浮動 —> 浮漏特

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

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

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

這個單詞很多人翻譯為 文件流 , 字面翻譯 普通流 或者標準流都可以。

前面我們說過,網頁布局的核心,就是用css來擺放盒子位置。如何把盒子擺放到合適的位置?

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

html語言當中另外乙個相當重要的概念----------標準流!或者普通流。普通流實際上就是乙個網頁內標籤元素正常從上到下,從左到右排列順序的意思,比如塊級元素會獨佔一行,行內元素會按順序依次前後排列;按照這種大前提的布局排列之下絕對不會出現例外的情況叫做普通流布局。

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

很多情況下,我們不方便給父親高度,比如新聞,因為不知道新聞裡面會有多少字,一般情況下,讓裡面的內容自動撐開盒子,不要寫死高度

其實本質叫做閉合浮動更好一些, 記住,清除浮動就是把浮動的盒子圈到裡面,讓父盒子閉合出口和入口不讓他們出來影響其他元素。

在css中,clear屬性用於清除浮動,其基本語法格式如下:

選擇器
屬性值

描述left

不允許左側有浮動元素(清除左側浮動的影響)

right

不允許右側有浮動元素(清除右側浮動的影響)

both

同時清除左右兩側浮動的影響

基本用的都是clear:both。

是w3c推薦的做法是通過在浮動元素末尾新增乙個空的標籤例如 

style

=」clear:both」

>

div>

,或則其他標籤br等亦可。優點: 通俗易懂,書寫方便

"box1">

"son1">

"son2">

"clear">

一般不使用這個方法

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

可以給父級新增: overflow為 hidden|auto|scroll  都可以實現。
優點: **簡潔

缺點: 內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢位的元素。

:after 方式為空元素的公升級版,好處是不用單獨加標籤了

使用方法:

.clearfix:after

.clearfix

/* ie6、7 專有 */

優點: 符合閉合浮動思想 結構語義化正確

缺點: 由於ie6-7不支援:after,使用 zoom:1觸發 haslayout。

使用方法:

.clearfix:before,.clearfix:after

.clearfix:after

.clearfix

優點: **更簡潔

缺點: 由於ie6-7不支援:after,使用 zoom:1觸發 haslayout。

浮動及其使用

標準文件流 指元素根據塊元素或行內元素的特性按從上到下,從左到右的方式自然排列。這也是元素預設的排列方式 標準文件流組成 塊級元素 block 列表 內聯元素 inline 設定不了寬高 內聯標籤可以包含於塊級標籤中,成為它的子元素,而反過來則不成立 display屬性 值 說明 block 塊級元...

浮動 定位 以及其區別

浮動 元素的浮動是指設定了浮動屬性的元素會脫離標準普通 流的控制,移動到其父元素中指定位置的過程。語法 float left right none 預設 注意 1.浮動的元素要有父元素 2.浮動後的元素類似元素行內塊元素,即使行內元 素浮動後也可以設定寬高.類似不代表是,浮動後的盒子可以設定寬高,但...

庫及其應用

庫及其應用 danny kalev發表於2004 12 27 16 11 06 1 何為 tuple?tuple 是乙個大小固定的異構物件集合。tuple 型別有很多有用的應用,比如封裝乙個函式的多個返回值以及模擬多個物件的同時賦值和比較。tuple 的大小是指它所包含的元素的個數。目前的 tupl...