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

css的正确語法構成

生活更新时间:2024-08-24 08:31:54

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每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

生活能燈關了還有點亮是什麼原因
造成這種情況的原因有兩種，一種是節能燈裡邊的電路接反了，需要重新接一下電路，需要把火線接開關再接燈，零線直接接燈。再就是節能燈快要壞了。因為節能燈是需要高壓激活發光的，如果裡面有遠見壞了的話，這時電流... 2023-07-03
生活窗簾布有甲醛嗎
窗簾布也是有甲醛的，雖然窗簾的主要成分是棉、麻或者紗類的，但是廠家為了讓窗簾平整在加工的時候會加入一些膠粘劑等，這樣的話能讓窗簾保持平整，而且洗完之後不會縮水。但是膠粘劑在經過太陽曬的時候會釋放一定的... 2023-07-03
生活面粉生産車間嚴禁吸煙的主要原因是
1、面粉生産車間嚴禁吸煙的主要原因是：防止爆炸。面粉生産車間中漂浮很多面粉顆粒，面粉顆粒是可燃物，當... 2023-07-03
生活汕頭美食
腸粉、手拍牛肉丸、蘿蔔粿、潮汕蚝烙、鴨母撚等。1、腸粉：是廣東老西關地區特色傳統名吃之一，屬于粵菜系，是一道米制品，因其形狀似豬腸，所以叫做腸粉。使用米漿做成，出品時以“白如雪，薄如紙，油光閃亮，香滑可口”而著稱。腸粉成菜呈現透明狀，口感軟滑又有彈性，可以搭配各種配料食用，各... 2023-07-03
生活快速消除甲醛方法
通常情況下，裝修後隻要時常開窗通風便能夠很快的去除室内超标的甲醛。要是想更為快速的去除室内的甲醛，我們可以用功率大一些的風扇吹一下室内，加快室内空氣流動，讓甲醛更快的揮發掉。同時，在屋内顯眼的地方多放... 2023-07-03
生活固化木是什麼木頭做的
固化木就是使用普通的木頭，通過特殊的工藝讓木材吸滿膠水，凝固之後即可形成固化木。固化木的強度比較高，而且還保持了木材的韌性，由于木材裡面的縫隙都被膠水填滿了，所以它可以永久保存而不會腐爛。但是木材加工... 2023-07-03
生活 epe是什麼材質
聚乙烯。俗稱珍珠棉，是以低密度聚乙烯制成的高泡沫聚乙烯制品。是世界上比較先進的保護性包裝材料。它輕便，靈活，并能彎曲，克服了普通發泡膠易碎，變形和難以恢複的缺點,epe還具有保溫，隔熱，隔音，防摩擦，... 2023-07-03
生活惡意舉報不實怎麼處理
1、依據我國相關法律的規定，通過捏造事實、虛構事實等方式進行惡意舉報，意圖讓他人承擔刑事責任的，就會構成誣告陷害罪，要承擔刑事責任。2、相關法律規定，《中華人民共和國刑法》第二百四十三條【誣告陷害罪】捏造事實誣告陷害他人，意圖使他人受刑事追究，情節嚴重的，處三年以下有期徒刑、拘役或者管制；造成嚴重後... 2023-07-03
生活怎麼養蝴蝶蘭
1、土壤。蝴蝶蘭的栽培比較特别，它的栽培介質主要以苔藓類和水草為主，而且栽培的土壤需要比較松軟的，方便蝴蝶蘭的根部生長。2、溫度。對于溫度，蝴蝶蘭有嚴格的要求，溫度要控制在15-30℃，要是低于或高于這個溫度就會出現不生長或者黃葉的現象。3、水分要充足。養殖蝴蝶蘭水分很重要，要保證充足的水分，因為蝴... 2023-07-03
生活類風濕最怕的食物有哪些
1、類風濕患者不能吃大魚大肉類的食物。2、類風濕患者最好是不要吃海産品類食物。患有類風濕的人是不能吃海産品的，列如：帶魚、螃蟹、龍蝦、海帶、海魚等等。因為海産品中含有尿酸，這種物質被人體吸收之後可以在關節中形成尿酸鹽結晶，能夠造成類風濕關節症狀加重，所以最好還是不要吃這些海産品。3、不要多吃辣椒。類... 2023-07-03
生活窗簾做1.5倍的還是2倍的
2倍。按照2倍的比例安裝窗簾，這樣展現出來的窗簾的寬度是四米，在整體上看窗簾的展示效果是最好的。窗簾的1.5倍和2倍是根據懸挂窗簾的窗簾盒來決定的，它們的不同主要是在于窗簾褶皺數量的倍數的不同。如果安... 2023-07-03
生活燃氣熱水器安裝注意事項
要注意安裝位置、防漏電、煙管安裝。燃氣熱水器安裝注意事項有三項：第一要注意安裝的位置。熱水器應該安裝在通風好并且使用方便的地方。第二要注意防漏電。電纜布線設計時要考慮地線，所有三孔插座地線與大地連通。... 2023-07-03
生活地暖上水熱下水不熱怎麼辦
方案1、打開排氣閥門排出積氣。造成原因：因為水管裡有積氣，導緻熱水循環不了。解決辦法：地暖頂部的排氣閥挨個打開進行排氣，氣體排完後，打開閥門，過一會在查看回水管的溫度。方案2、清洗地暖水管。冬季過後，... 2023-07-03
生活窗戶有風怎麼密封
更換密封條或者打玻璃膠就能解決窗戶漏風。窗戶有風的原因：通常窗戶有風，問題出在窗戶有縫隙，是因為密封條經過長時間風吹日曬縮水或老化，遇到這種情況提供兩種最簡單直接的解決方案。1、更換密封條：将舊的密封... 2023-07-03
生活房間裡潮濕很重怎麼辦
可以在房間内放置一些石灰或者防潮袋，或者也可以将報紙鋪在地闆上，點蠟燭也可以起到一定的除濕的效果。也可以通過開啟空調的除濕功能，或者購買除濕機放置在潮濕的房間内。最後一定要注意早晚要關閉門窗，保持室内... 2023-07-03
生活暖氣片怎麼清洗
首先将暖氣片的進水閥門和回水閥門全部關閉，然後使用扳手将堵頭擰開，在擰的時候要注意力道，避免不小心将其弄壞。然後打開溫控閥門進行沖洗，沖洗時注意流出的水，流出的水比較清澈後便可關閉閥門，取消清洗。最後... 2023-07-03
生活測試甲醛什麼方法最有效
經濟條件好的，自然是直接找專業的檢測甲醛公司的人員進行上門檢測，這樣也比較省心省力。一般需要現場采樣，然後等3-7個工作日才能出檢測結果，如果檢測中有甲醛含量超标的情況，檢測公司也給予相應的治理。還有... 2023-07-03
生活什麼是腰線房
腰線房就是平時我們看到的樓房外面一塊凸出來的地方，一般位于整棟樓房的關鍵幾個部位，凸起對應部分的樓層就叫腰線房。建造這種房子主要是開發商為了看起來比較美觀來建造的。腰線房有保溫隔熱、可利用面積大。但是... 2023-07-03
生活衛生間下水管道安裝
第一，加壓測試通常在水壓的1、5倍下進行，并且在測試過程中不應漏水。第二，無需加壓的簡單測試方法：1、關閉水管主閥。2、打開水龍頭20分鐘，然後确保沒有水滴，然後關閉所有水龍頭。3、關閉馬桶水箱和洗衣... 2023-07-03
生活酸枝木是什麼木頭
酸枝木主要有兩種，分别是紅酸枝木和黑酸枝木，另外還有白酸枝和花酸枝。酸枝木的結構比較細密均勻，密度大于水，顔色為深紅色中夾雜着社褐色或者黑色的花紋，非常美觀。其中，黑酸枝的材質是最好的，抛光效果比較好... 2023-07-03
生活空氣層面料是什麼材質
紡織品輔料。空氣層面料是全棉面料通過在化學水溶液中浸泡而産生無數根特細的毛，這些細毛可以使布料表層形成一層極薄的空氣層，空氣層面料就是紡織品輔料的一種，并且它的原材料有滌綸、滌氨綸、滌棉氨綸等。空氣層... 2023-07-03
生活舊牆面如何翻新
1、将鏟子、滾筒、砂紙等翻新時用到工具材料準備好，還要準備足量的油漆，避免後期油漆不足再次購買的油漆與原來油漆色澤不一的情況發生。2、對舊牆面的基層進行處理，如果牆面有粉化的問題，要使用鏟子對漆面進行... 2023-07-03
生活家具甲醛标準範圍多少正常
根據中國人民共和國實木複合闆标準規定：A類的實木複合地闆甲醛釋放量不能大于每一百克中九毫克的标準，B類實木複合地闆甲醛釋放量要在每一百克中九毫克至四十毫克。國家環境标志産品技術要求人造木質闆材的規定中... 2023-07-03
生活地磚尺寸
目前用于室内的地磚尺寸常見為以下幾種：1、30cmx30cm。2、40cmx40cm。3、50cmx50cm。4、60cmx60cm。5、100cmx100cm。 2023-07-03
生活停車位劃線漆如何消除
1、塗黑色油漆。在劃線漆的基礎上，塗抹黑色油漆覆蓋，這種方式隻能暫時性解決。2、打磨機切削。使用打磨機将停車位劃線漆切除，這種方式除線幹淨，但是容易損傷路面。3、噴砂。這種方式既能夠徹底清除劃線漆，又... 2023-07-03
生活衛生間馬桶臭味很重怎麼辦
1、不要在浴室裡放濕拖把和毛巾，容易吸收水分并産生黴味，所以不要将洗過的毛巾挂在浴室裡，最好帶到陽台上晾幹。2、綠色植物，将一些綠色植物，如仙人掌、綠蘿放在馬桶的附近，它們可以吸收馬桶中的異味和有毒物... 2023-07-03
生活關于小熊的網名可愛
熊抱、我有小熊、彼得熊貓、小熊布偶、洋娃娃和小熊跳舞、小熊的少女夢、我沒有熊熊、别動我小熊、笑呆熊、奶熊起司、妳看見我的小熊了嗎、趴趴熊、維尼熊、想吃可愛熊的竹、請把小熊還給我、擁抱一隻小熊的孤單等。網名：網名指在網上使用的名字。由于網絡是一個虛拟的世界，為了避免使用真實姓名帶來的麻煩所以發明了網名。網名一般是指網友在網絡世界裡的一個虛拟名稱。包含：論壇網名、qq網名、MSN網名、遊戲網名等。qq 2023-07-03
生活 ocufilcond是什麼材質
甲基丙烯酸甲酯。也就是通常所說的矽水凝膠材質。這是一種高分子的有機材質，就有非常好的親水效果，同時是雙位相的的材料架構，會同時具備氟矽和水凝膠兩種兩種選擇。由于上述的良好品質，所以經常被用來制作高檔的... 2023-07-03
生活 ppsu是什麼材質的奶瓶
ppsu是一種無定型的熱性塑料，是分子主鍊中含有砜基及芳核的非結晶性高分子化合物。Ppsu奶瓶的主要特點是無色透明、比較輕盈，拿起來很方便，耐摔，很多家庭為了安全選擇玻璃奶瓶特别容易摔碎，這種奶瓶完全... 2023-07-03
生活黃金竹的養殖方法
1、黃金竹繁殖速度較慢，一般是春末夏初進行移栽，因為若太早會因幹旱少雨，多風而影響成活；若栽種太晚竹... 2023-07-03

tft每日頭條

> 生活

> css的正确語法構成

css的正确語法構成

相关生活资讯推荐

热门生活资讯推荐

网友关注