css的正确語法構成-tft每日頭條

css的正确語法構成

生活更新时间:2024-12-12 04:03:27

BFC，block formatting context，塊級格式化上下文。在日常開發中，有可能你聽說過，或者沒聽過但是已經用過了。今天我們從原理來剖析BFC。

先看一個例子：

css的正确語法構成（css解析理解BFC）1

媒體對象

左邊灰色背景的“塊”一般成為“媒體對象”。媒體對象的左邊是一張圖片，右邊是文本。我們将img設置為浮動，讓文本和圖片自然地左右排列。有些時候，我們不想讓文本環繞圖片，而是嚴格的分成左右兩個部分。此時，我們就需要清除圖片底部的浮動。

為了實現這種布局，需要為文本建立一個塊級格式化上下文。我們修改下上面的代碼：

css的正确語法構成（css解析理解BFC）2

創建BFC

創建BFC對元素做了以下事情：

包含了内部所有元素的上下外邊距。它們不會跟BFC外面的元素産生外邊距折疊。
包含了内部所有的浮動元素。
不會跟BFC外面的浮動元素重疊。

簡而言之，BFC裡的内容不會跟外部的元素重疊或者相互影響。如果給元素增加clear屬性，它隻會清除自身所在的BFC的浮動。如果強制給一個元素生成一個新的BFC，它不會跟其他BFC重疊。

如何給一個元素創建一個BFC呢？給元素添加以下任意屬性都會創建BFC：

float：left或right，不為none即可
overflow：hidden，auto，scroll等，不為visible即可
display：inline-block，table-cell，table-caption，flex，inline-flex，grid，inline-grid。（擁有這些屬性的元素成為塊級容器）
position：absolute，fixed

總結

浮動在現在的前端開發中已經不再那麼流行，因為在很多場景有新的替代特性，比如flex、grid布局，還有就是float有很多細節點需要考慮，稍微不注意就會産生不合預期的表現。今天我們學習的BFC就是對浮動布局的一個輔助，要記住BFC的應用場景以及如何創建一個BFC，才能在使用float的時候更加得心應手！

上面提供了很多創建BFC的方式，之前的例子中，我們使用的是overflow：auto；有小夥伴知道如果使用别的方式會達到效果嗎？會有副作用嗎？歡迎在評論區留言和我讨論～

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

生活如何腌雞蛋出油還好吃
大家好，我是原創作者：為愛下廚讓你省力、又省心，做出簡單又好吃的美味讓飯菜充滿濃濃家鄉的味道，讓我們一起努力成長，做出充滿愛的美食做出不一樣的獨特美食，做法簡單又快捷《家常腌雞蛋》準備材料：黃皮雞蛋、八角、桂皮、香葉、花椒、精鹽、高度白酒。... 2022-11-12
生活人不要總是活在過去和回憶裡
#「活得通透」主題創作大賽#偶遇梅，一起吃早餐，她大我幾歲，跟她聊起玲，她們差不多大，同學聚會時，玲說每周周末都來我家玩，聚會後再邀請，玲拒絕了，是我多情了？不是，是玲過得不好，自卑。梅說，我愣了，我百思不得解的問題原來是這樣？确實我從沒有... 2023-01-28
生活端午節休幾天
端午節休幾天?端午節2021年放三天，分别是6月12日，6月13日，6月14日三天，其中6月12日，6月13日分别是星期六和星期天，6月14日當天是端午節，是法定節假日，接下來我們就來聊聊關于端午節休幾天?以下内容大家不妨參考一二希望能幫到... 2022-08-22
生活德國高鐵最快時速多少公裡
除了中國之外，德國也是高鐵大國，日前德國鐵路DB公司發出要求，指定西門子及阿爾斯通兩家公司研發下一代高鐵，目标是在2030年後投入運營。據悉，DB公司目前運營的高鐵是1990年代投入運行的ICE3式列車，已經跟不上時代了，新一代高鐵速度更快... 2023-01-22
生活我的世界更改模式指令
我的世界更改模式指令?我的世界更改模式指令為gamemode，具體方如下：，我來為大家科普一下關于我的世界更改模式指令?以下内容希望對你有幫助!我的世界更改模式指令我的世界更改模式指令為gamemode，具體方如下：首先打開我的世界，之後再... 2022-07-02
生活廉江哪裡可以采摘火龍果
夏季是不少水果的采摘季，位于沾益區珠江源大道附近的火龍果目前已經成熟進入采摘期，十分适合市民前去觀光采摘。走進沾益火龍果種植基地，連片的火龍果長勢喜人，一排排整齊的類似仙人掌的植物，細看過去，一個個紅的、綠的像小菠蘿似的果實長在枝幹上，煞是... 2022-10-26
生活 suv跑高速和轎車的區别
自從國人經濟水平提高以後，很多消費者在買車的時候也有了更多的需求，不過這個時候有很多消費者非常的好奇，那就是在如今的汽車市場上，他們不知道究竟是選擇轎車還是選擇SUV，雖然SUV這種車型比較受年輕消費者喜愛，但不可否認的是，轎車的銷量一直以... 2022-11-12
生活窮乏是什麼意思解釋一下
西北風刮了起來，且越來越硬。資料圖圖文無關圖源新華社早晨，地上白霜皚皚，無數的烏鴉團聚在空中，呱呱聒噪，仿佛是一朵會叫喚的黑雲。地上的枯草變成了白色，仔細一看，像粘了毛似的。騎摩托的人反穿着黃大衣，氣呼出來就變成了淺淺的白霧。騎自行車的人戴... 2023-01-28
生活雞賊是什麼意思
雞賊是什麼意思?雞賊是一個北京方言，拼音是jīzéi是指小氣、吝啬，上不得台面；也指特别能算計，特别摳門，暗藏私心的意思；還有另一個意思，就是狡猾、耍小聰明，同時還帶着點猥瑣，現在小編就來說說關于雞賊是什麼意思?下面内容希望能幫助到你，我們... 2022-06-12
生活小龍蝦開始上市了嗎
随着天氣漸熱，在長甯的不少市場、超市，夜宵“頂流”小龍蝦上市了，吸引不少市民選購。在長順路一家水産店，小龍蝦按個頭大小分裝在不同的盆内，揮舞着大鉗子，在整個水産攤位上格外搶眼，不時有市民稱上兩三斤，拎回家嘗鮮。“天氣熱了，就是要和家人們一起... 2023-01-01
生活奶嘴孔小了怎麼紮大
奶嘴孔小了怎麼紮大?很多新奶嘴上的孔都太小，不适合小嬰兒使用這種小孔倒适合大一點的或者強壯一點的孩子使用如果奶嘴孔對孩子來說太小了，新媽媽可以用下面的方法把它擴大一點：，今天小編就來聊一聊關于奶嘴孔小了怎麼紮大?接下來我們就一起去研究一下吧... 2022-06-08
生活環球中心分布圖
2000多年前，一圈龜形的城牆将成都圍了起來，城牆内的街巷全部采用斜向布局，東南西北四大城門也自然随之傾斜。南門，便位于西南方向的萬裡橋。20世紀初，因為備戰需要，成都又增加了新的南門，即新南門。幾十年後，一條正南正北的寬闊大道打破了成都城... 2023-01-12
生活微信表情一杯茶和有太陽的笑臉什麼意思...
微信表情一杯茶和有太陽的笑臉什麼意思啊?微信表情太陽：充滿能量，溫暖的意思，今天小編就來說說關于微信表情一杯茶和有太陽的笑臉什麼意思啊?下面更多詳細答案一起來看看吧!微信表情一杯茶和有太陽的笑臉什麼意思啊微信表情太陽：充滿能量，溫暖的意思。... 2022-06-30
生活糟糠之妻不下堂中不下堂的意思
糟糠之妻不下堂中不下堂的意思?糟糠之妻不下堂出自《後漢書》，意思是不要抛棄共同患難過的妻子《後漢書》是一部記載東漢曆史的紀傳體史書，與《史記》、《漢書》、《三國志》合稱“四史”書中分十紀、八十列傳和八志（司馬彪續作），記載了從王莽起至漢獻帝... 2022-07-29
生活花椒粉制作方法
花椒粉制作方法?幹花椒在鋼精鍋内炒出香味，有噼啪聲音即可，關火，納涼後放大的砧闆上涼後的花椒很脆，容易碾碎，今天小編就來聊一聊關于花椒粉制作方法?接下來我們就一起去研究一下吧!花椒粉制作方法幹花椒在鋼精鍋内炒出香味，有噼啪聲音即可，關火，納... 2022-08-04
生活炸花生米怎麼判斷熟了
炸花生米怎麼判斷熟了?倒入花生米之後，立刻不斷翻炒，大概1分鐘後，直到一部分花生米的外衣已出現裂痕即是熟了，我來為大家科普一下關于炸花生米怎麼判斷熟了?以下内容希望對你有幫助!炸花生米怎麼判斷熟了倒入花生米之後，立刻不斷翻炒，大概1分鐘後，... 2022-06-13
生活玉米冬天怎麼保存
玉米冬天怎麼保存?将玉米剝開，去掉玉米的外衣和絨毛，用清水沖洗玉米并進行挑選，不能有腐壞的玉米，用保鮮膜将玉米包裹一層或兩層，将玉米兩頭的保鮮膜封住按緊，最好不要有流通的空氣，接下來我們就來聊聊關于玉米冬天怎麼保存?以下内容大家不妨參考一二... 2022-06-10
生活柳桃花怎麼養才長得好
柳桃花怎麼養才長得好?桃花澆水：不幹不澆，澆時要适量，防止積水造成爛根，噴施新高脂膜，調節水的吸收量，下面我們就來聊聊關于柳桃花怎麼養才長得好?接下來我們就一起去了解一下吧!柳桃花怎麼養才長得好桃花澆水：不幹不澆，澆時要适量，防止積水造成爛... 2022-06-09
生活貴州平壩櫻花開放的最好時機
初春三月，春風拂過大地，大地開始了一場花的盛宴！櫻花盛開，如雲似霞，櫻花帶來清新的春天氣息,并預示着春天的真正來臨，春風輕拂，落櫻飛舞。一說到賞櫻之地，便想到了日本，這個時節，日本櫻花也還在花苞内醞釀，預計落櫻紛飛之日在三月下旬值四月初。武... 2023-03-02
生活商鞅最大的曆史功績是什麼
商鞅最大的曆史功績是什麼?商鞅是我國曆史上有名的變法維新者為國家的強盛，人民的富裕做出了很大的貢獻商鞅年少時便喜歡法家的刑名之學，後來投身到魏國相公公叔蓙的門下，任中庶子後來又拜投秦孝公他向秦孝公獻富國強兵之策，被任命為左庶長，主持變法，我... 2022-10-19
生活夏季體溫高怎麼降溫
夏季體溫高怎麼降溫?熱水澡：其實在夏季的時候溫度較高很多人可能就會選擇去洗冷水澡，其實這個并不是一個合理的做法，在平時生活中的話建議去洗熱水澡才可以更好的起到降低自身溫度的作用的，因為熱水可以讓人體表面的毛孔打開，起到一定的散熱的作用的，但... 2022-06-18
生活八字看孩子在學校的地位
周末帶娃去店裡買鞋，試穿的時候，店員突然說：你家孩子一看就能長個大高個。我問她怎麼看出來的？店員說：看腳長，我媽說孩子的身高跟腳長成正比，腳越長身高越高。我們老家也有不少老人認為，孩子的身高從小就能從某些身體特征看出來，比如腳長。古人有“立... 2022-12-09
生活蝸牛手機卡過戶如何辦理
一說到三大運營商之外比較好的通訊運營商，想必很多人都會說那肯定是蝸牛運營商。确實蝸牛作為國内較早虛拟通訊運營商，用戶數量非常大。為了拓展業務，蝸牛很早就推出來電銷卡，電銷卡主要作用就是用來撥打營銷電話。用戶日常回訪業務所用，那麼，蝸牛電銷卡... 2023-03-03
生活天梭手表和卡西歐哪個好
天梭手表和卡西歐哪個好?親民手表同樣也值得關注，比如天梭、卡西歐、西鐵城等品牌，它們的手表不僅相對比較便宜，而且質量也比較可靠，我來為大家講解一下關于天梭手表和卡西歐哪個好?跟着小編一起來看一看吧!天梭手表和卡西歐哪個好親民手表同樣也值得關... 2022-10-16
生活塑料杯喝多少溫度的水沒有危害
用一次性紙杯裝熱飲，在短時間内會釋放塑料微粒前不久，印度理工學院的學者發現，用一次性紙杯裝熱飲，在15分鐘内會釋放數萬個塑料微粒。在實驗中，研究人員用紙杯盛裝10毫升85℃-90℃的熱水，靜置15分鐘。然後在顯微鏡下分析液體成分的變化。結果... 2022-12-05
生活女子微信餘額近30萬被凍結
女子微信餘額近30萬被凍結?前一晚還在使用微信給好友轉賬，第二天一大早發現微信被盜且被人使用“親屬卡”支出12000元，微信客服稱因“親屬卡交易”無法理賠，我來為大家科普一下關于女子微信餘額近30萬被凍結?以下内容希望對你有幫助!女子微信餘... 2022-12-13
生活白羊座和雙子座能在一起嗎
如果為人熱情的白羊座和喜歡新鮮事物的雙子座在一起的話會發生什麼呢？聽人家白羊座和雙子座的是最不搭的星座組合之一。雙子座比較難于琢磨，有時候白羊座的小夥伴會覺得雙子們就像遠處吹來的風一樣，無法猜透Ta的心思，會覺得很累。同時，雙子們在一些事情... 2022-12-31
生活方程的概念
方程的概念?方程（equation）是指含有未知數的等式是表示兩個數學式（如兩個數、函數、量、運算）之間相等關系的一種等式，使等式成立的未知數的值稱為“解”或“根”求方程的解的過程稱為“解方程”，我來為大家科普一下關于方程的概念?下面希望有... 2022-06-28
生活奶黃奶茶制作
奶茶作為年輕人特别愛喝的飲料，特别是對年輕的女孩子有不可抗拒的魔力。但是，無論是在外面奶茶店購買的現做奶茶或者是超市購買的瓶裝奶茶都一言難盡。很多奶茶都含有植脂末，反式脂肪酸。有些街邊的小店做的奶茶，由于追求低物料成本，裡面的添加劑含量又是... 2022-12-03
生活最旺财旺宅的三種花萆
最旺财旺宅的三種花萆?銀柳：銀柳的葉芽是銀光閃閃的，更是有節節上升的意思，這種植物真的是能旺财的，特别适合插在家中客廳的大花瓶上的，而且柳是有“留”之意的，能讓家人的運氣更好的，留住了好運，更是能守财的，我來為大家科普一下關于最旺财旺宅的三... 2022-06-12

tft每日頭條

> 生活

> css的正确語法構成

css的正确語法構成

相关生活资讯推荐

热门生活资讯推荐

网友关注