CSS 清除浮動與BFC的方法

BFC
BFC:塊級格式化上下文
BFC的布局規(guī)則
- 內(nèi)部的Box會在垂直方向,一個接一個地放置。
- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
- 計算BFC的高度時,浮動元素也參與計算。
- BFC的區(qū)域不會與float box重疊。
- 每個盒子(塊盒與行盒)的margin box的左邊,與包含塊border box的左邊相接觸(對于從左往右的格式化,否則相反)。即使存在浮動也是如此。
- BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。反之也如此。
如何創(chuàng)建BFC
1、 float 的值不是 none 。
2、 position 的值不是 static 或者 relative 。
3、 display 的值是 inline-block 、 table-cell 、 flex 、 table-caption 或者 inline-flex
4、 overflow 的值不是 visible
BFC的作用
1.利用BFC避免margin重疊。
2.自適應兩欄布局
3.清除浮動。
清除浮動
清除浮動主要是為了解決,父元素因為子級元素浮動引起的內(nèi)部高度為0的問題。
清除浮動的方法
1. 額外標簽法
在最后一個浮動標簽后,新加一個標簽,給其設置clear:both;(不推薦)
優(yōu)點:通俗易懂,方便
缺點:添加無意義標簽,語義化差
<style> .div1 { background: #00a2d4; } .left { float: left; width: 200px; height: 200px; background: #9889c1; } .right { float: right; width: 200px; height: 200px; background: orangered; } .clear { clear: both; } </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="clear"></div> </div> <div class="div2"></div> </body>
2.父級添加overflow屬性
通過觸發(fā)BFC方式,實現(xiàn)清除浮動。(不推薦)
優(yōu)點:代碼簡潔
缺點:內(nèi)容增多的時候容易造成不會自動換行導致內(nèi)容被隱藏掉,無法顯示要溢出的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { background: #00a2d4; overflow: hidden; } .left { float: left; width: 200px; height: 200px; background: #9889c1; } .right { float: right; width: 200px; height: 200px; background: orangered; } </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"></div> </body> </html>
3.使用after偽元素清除浮動(推薦使用)
優(yōu)點:符合閉合浮動思想,結構語義化正確。
缺點:ie6-7不支持偽元素:after,使用zoom:1觸發(fā)hasLayout。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { background: #00a2d4; } .left { float: left; width: 200px; height: 200px; background: #9889c1; } .right { float: right; width: 200px; height: 200px; background: orangered; } .clearfix:after { content: ""; /*內(nèi)容為空*/ display: block; /*轉換為塊級元素*/ height: 0; /*高度為0*/ clear: both; /*清除浮動*/ visibility: hidden; /*隱藏盒子*/ } .clearfix { *zoom: 1; /*IE6\7的處理方式*/ } </style> </head> <body> <div class="div1 clearfix"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"></div> </body> </html>
4.使用before和after雙偽元素清除浮動
優(yōu)點:不僅可以清除浮動,也可以解決高度塌陷的問題(給父盒子添加類名clearfix)
缺點:用zoom:1觸發(fā)hasLayout.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { background: #00a2d4; } .left { float: left; width: 200px; height: 200px; background: #9889c1; } .right { float: right; width: 200px; height: 200px; background: orangered; } .clearfix:after, .clearfix:before { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } </style> </head> <body> <div class="div1 clearfix"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"></div> </body> </html>
總結
到此這篇關于CSS 清除浮動、BFC的文章就介紹到這了,更多相關css 浮動 BFC內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
相關文章
css overflow: hidden 的用法(溢出隱藏及清除浮動)
overflow:hidden是經(jīng)常用到的一個css屬性,它有兩種常用用法:溢出隱藏和清除浮動,這里就為大家介紹一下,需要的朋友可以參考下2020-03-13- 這篇文章主要介紹了CSS實現(xiàn)元素浮動和清除浮動的方法,簡單介紹了浮動的基本知識,通過截圖代碼的形式給大家介紹了css清除浮動的方法,需要的朋友可以參考下2019-12-05
- 這篇文章主要介紹了Css實現(xiàn)清除浮動的方法匯總,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-11
- 塊級格式化上下文,是一個獨立的渲染區(qū)域,讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離,使內(nèi)外元素的定位不會相互影響。這篇文章給大家介紹了CSS 使用偽元素清除浮動的方2019-07-01
- 本文通過圖文并茂的形式給大家介紹了CSS浮動與清除浮動的實例代碼,非常不錯,具有一定的參考借鑒價值,,需要的朋友可以參考下2019-04-29
- 這篇文章主要介紹了css 如何清除浮動的示例代碼,詳細的介紹了浮動到底是什么和清理浮動的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看2018-11-12
- 本文通過多種方法給大家介紹CSS清楚浮動clear:both的實例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2020-11-16