BFC和清除浮動

時間 2019-11-18

標籤 bfc 清除浮動简体版

原文原文鏈接

BFC：

特性

塊級格式化上下文會阻止外邊距疊加
當兩個相鄰的塊框在同一個塊級格式化上下文中時，它們之間垂直方向的外邊距會發生疊加。換句話說，若是這兩個相鄰的塊框不屬於同一個塊級格式化上下文，那麼它們的外邊距就不會疊加。
塊級格式化上下文不會重疊浮動元素
根據規定，一個塊級格式化上下文的邊框不能和它裏面的元素的外邊距重疊。這就意味着瀏覽器將會給塊級格式化上下文建立隱式的外邊距來阻止它和浮動元素的外邊距疊加。因爲這個緣由，當給一個挨着浮動的塊級格式化上下文添加負的外邊距時將會不起做用。
塊級格式化上下文一般能夠包含浮動

通俗地來講：建立了BFC的元素就是一個獨立的盒子，裏面的子元素不會在佈局上影響外面的元素，反之亦然，同時BFC任然屬於文檔中的普通流。css

觸發條件：

<html>根元素
float 除了none之外的值html
overflow 除了visible 之外的值（hidden，auto，scroll ）瀏覽器
display (table-cell，table-caption，inline-block)佈局
position（absolute，fixed）spa
fieldset元素（實驗中，不建議使用）code

建議採起的BFC特性

.lbf-content { overflow: hidden; }

.lbf-content { display: table-cell; width: 9999px; }

第二種會讓連續英文字符換行，解決方法：htm

浮動的缺點：.word-break { display: table; width: 100%; table-layout: fixed; word-break: break-all; }

沒法撐起父元素。文檔
同級別的兄弟元素會圍繞在周圍。

清除浮動經常使用的幾種方式：

簡單看看如何造成BFC：
（1）float值不爲none，能夠是left，right或both
（2）overflow爲hidden或auto或scroll
（3）display爲inline-block或table-cell或table-caption
（4）position爲absolute或fixed
咱們能夠對父容器添加這些屬性使其變成BFC，從而達到「清浮動」效果

一、父級div定義僞類：after和zoom

.clearfloat:after{display:block;clear:both;content:"";}

.clearfloat{zoom:1}

2.在結尾處添加空div標籤clear:both

添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度it

3.父級div定義height

父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題；不推薦使用，只建議高度固定的佈局時使用io

4.父級div定義overflow:hidden

只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。