浮動

什么是浮動

float屬性用于創(chuàng)建浮動框给僵,將其移動到一邊烙无,直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣锋谐。浮動相當于又增加了一層,新增加的一層是飛起來的截酷,所以會脫離標準流涮拗。

語法

選擇器{ float:屬性值;}

屬性值描述

none元素不浮動

left元素左浮動

right元素右浮動

浮動特性

加了浮動之后的元素,會具有很多特性,需要我們掌握的。

1.浮動元素會脫離標準流(脫標)

2.浮動的元素會一行內(nèi)顯示并且元素頂部對齊

3.浮動的元素會具有行內(nèi)塊元素的特性

?脫標

設置浮動(float)的元素最重要的的特性:

[if !supportLists]1.????[endif]脫離標準普通流的控制(浮)移動到指定位置(動)多搀,俗稱脫標歧蕉。

[if !supportLists]2.????[endif]浮動的盒子不再保留原先的位置

浮動盒子一行顯示

如果多個盒子都設置了浮動康铭,則它們會按照屬性值一行內(nèi)顯示并且頂端對齊排列惯退。

注意∶浮動的元素是互相貼靠在一起的(不會有縫隙),如果父級寬度裝不下這些浮動的盒子从藤,多出的盒子會另起一行對齊催跪。

浮動元素具有行內(nèi)塊特性

任何元素都可以浮動。不管原先是什么模式的元素(塊級元素夷野,行內(nèi)元素)懊蒸,添加浮動之后具有行內(nèi)塊元素相似的特性。

如果塊級盒子沒有設置寬度悯搔,默認寬度和父級一樣寬骑丸,但是添加浮動后,它的大小根據(jù)內(nèi)容來決定

浮動的盒子中間是沒有縫隙的妒貌,是緊換著一起的

行內(nèi)元素同理通危,可以設置高度和寬度。

浮動元素標準流經(jīng)常和標準流父親搭配使用

為了約束浮動元素位置灌曙,網(wǎng)頁布局一般采取的策略是:

先用標準流的父親元素排列上下位置菊碟,之后內(nèi)部子元素采取浮動排列左右位置,符合網(wǎng)頁布局第一準則

網(wǎng)頁布局第二準則:先設置盒子大小在刺,再設置盒子的位置逆害。

浮動布局注意點

1.浮動和標準流的父盒子搭配。

先用標準流的父元素排列上下位置,之后內(nèi)部子元素采取浮動排列左右位置

2.一個元素浮動了蚣驼,理論上其余的兄弟元素也要浮動魄幕。

一個盒子里面有多個子盒子,如果其中一個盒子浮動了颖杏,那么其他兄弟也應該浮動纯陨,以防止引起問題。浮動的盒子只會影響浮動盒子后面的標準流不會影響前面的標準流.

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末输玷,一起剝皮案震驚了整個濱河市队丝,隨后出現(xiàn)的幾起案子靡馁,更是在濱河造成了極大的恐慌欲鹏,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件臭墨,死亡現(xiàn)場離奇詭異赔嚎,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門尤误,熙熙樓的掌柜王于貴愁眉苦臉地迎上來侠畔,“玉大人,你說我怎么就攤上這事损晤∪砉祝” “怎么了?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵尤勋,是天一觀的道長喘落。 經(jīng)常有香客問我,道長最冰,這世上最難降的妖魔是什么瘦棋? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮暖哨,結果婚禮上赌朋,老公的妹妹穿的比我還像新娘。我一直安慰自己篇裁,他們只是感情好沛慢,可當我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著茴恰,像睡著了一般颠焦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上往枣,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天伐庭,我揣著相機與錄音,去河邊找鬼分冈。 笑死圾另,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的雕沉。 我是一名探鬼主播集乔,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼坡椒!你這毒婦竟也來了扰路?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤倔叼,失蹤者是張志新(化名)和其女友劉穎汗唱,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體丈攒,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡哩罪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年授霸,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片际插。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡碘耳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出框弛,到底是詐尸還是另有隱情辛辨,我是刑警寧澤,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布瑟枫,位于F島的核電站愉阎,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏力奋。R本人自食惡果不足惜榜旦,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望景殷。 院中可真熱鬧溅呢,春花似錦、人聲如沸猿挚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绩蜻。三九已至铣墨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間办绝,已是汗流浹背伊约。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留孕蝉,地道東北人屡律。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像降淮,于是被迫代替她去往敵國和親超埋。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 《爛俗前端》[https://juejin.cn/column/7017997240325111845]是一部以前...
    島民小強閱讀 1,037評論 0 1
  • 一佳鳖、網(wǎng)頁認識 1霍殴、網(wǎng)頁組成 文字、圖片系吩、超鏈接来庭、音頻、視頻淑玫; 2巾腕、網(wǎng)頁背后本質(zhì) 前端程序員寫的一行行的代碼; 3絮蒿、...
    Cargo閱讀 500評論 0 0
  • 前言1-CSS對HTML元素分類 css元素分為三種:塊級元素尊搬、行內(nèi)元素和行內(nèi)塊元素。 1.塊級元素:設置disp...
    XAbo閱讀 190評論 0 0
  • 盒模型 包括:外邊距(margin)土涝、邊框(border)佛寿、內(nèi)邊距(padding)、實際內(nèi)容(content)四...
    39efd53bb8ae閱讀 414評論 0 0
  • 來自微信公眾號:前端大全 1 介紹一下標準的CSS的盒子模型但壮?與低版本IE的盒子模型有什么不同的冀泻? 標準盒子模型:...
    R_X閱讀 420評論 0 3