浮動
介紹：
-
其實(shí)早期的浮動是用來文字環(huán)繞圖片效果,但是后來發(fā)現(xiàn)浮動還可以設(shè)置頁面布局問題
-
塊元素在文檔流中默認(rèn)垂直排列，如果希望塊元素在頁面中水平排列，可以使塊元素脫離文檔流
特點(diǎn)：
-
哪個元素設(shè)置浮動，哪個元素就會脫離文檔流
-
如果給上邊的元素設(shè)置浮動時，下邊的元素就會跑到上邊元素的位置上，上邊元素會覆蓋住下邊的元素（原因是上面的元素已經(jīng)脫離了文檔流，不占據(jù)位置）
-
脫離文檔流的元素，默認(rèn)在父元素的頂部，不會超出父元素的內(nèi)容
-
脫離文檔流的元素不再區(qū)分塊和行內(nèi)，統(tǒng)一會變成行內(nèi)塊
-
無論浮動的元素是右還是左浮動，下面的元素都會默認(rèn)朝左上角
-
如果父元素設(shè)置了padding,那么浮動的子元素不會超出padding以外
-
元素浮動主要就是為了元素之間在一行排列（頁面布局問題）
-
浮動的元素并不是根據(jù)上下排列的順序來設(shè)置左右浮動，每個元素可以任意設(shè)置浮動位置
-
如果上下元素都浮動了，他們就會按照順序進(jìn)行排列
-
如果上邊有元素未設(shè)置浮動，下邊設(shè)置浮動的元素會被擋住
清除浮動
clear屬性
清除浮動，指定段落的左側(cè)或右側(cè)不允許浮動的元素
| 屬性 | 描述 |
|---|---|
| right | 清除向右浮動的元素 |
| left | 清除向左浮動的元素 |
| both | 清除左右浮動的元素 |
方法一：額外標(biāo)簽法（w3c提出，不推薦）
是給最后一個浮動的元素后面添加一個空標(biāo)簽,給空標(biāo)簽設(shè)置clear屬性清除浮動
原理：
額外標(biāo)簽法主要就是調(diào)整額外標(biāo)簽的自身，通過調(diào)整自身來使自己不要和浮動元素排列在一起。
缺點(diǎn)：
如果頁面中出現(xiàn)很多的浮動，就需要添加很多空標(biāo)簽清除浮動，就會導(dǎo)致很繁瑣，所以不推薦
方法二：給父元素添加overflow屬性（不推薦）
給父元素添加overflow屬性非visible屬性值（auto、scroll、hidden）
缺點(diǎn)：
如果子元素內(nèi)容過多會出現(xiàn)隱藏問題，或者頁面布局發(fā)生改變，不常用此屬性
方法三：給父元素設(shè)置after偽元素
偽元素創(chuàng)建的元素是行內(nèi)元素
其實(shí)原理和額外標(biāo)簽法類似
? ? ? ?/*只寫一個冒號是為了兼容其他瀏覽器不支持::*/ ? ?
? ? ?.clearfix:after {
? ? ? ? ? ?/*偽元素創(chuàng)建的元素是行內(nèi)元素*/
? ? ? ? ? ?/*content值要加一個小點(diǎn)，為了防止低版本瀏覽器解析時出現(xiàn)空隙問題*/
? ? ? ? ? ?content: ".";
? ? ? ? ? ? /* 轉(zhuǎn)化為塊元素*/
? ? ? ? ? ?display: block;
? ? ? ? ? ?height: 0;
? ? ? ? ? ?/*隱藏content里面的小點(diǎn)*/
? ? ? ? ? ?visibility: hidden;
? ? ? ? ? ?/*清除浮動*/
? ? ? ? ? ?clear: both;
? ? ? }
? ? ? ? ? ?/*以下是為低版本瀏覽器做的適配*/
? ? ? .clearfix {
? ? ? ? ? *zoom: 1;
? ? ? ? ? ?/* 星號代表了只有ie6和ie7才會解析這段代碼，zoom是ie6和ie7的清除浮動方法 */
? ? ? }方法四：給父元素添加雙偽元素after before （推薦）
?.clearfix:before,
? ? ? ?.clearfix:after {
? ? ? ? ? ?content: "";
? ? ? ? ? ?display: table;
? ? ? ? ? ?/*觸發(fā)BFC*/
? ? ? ? ? ?clear: both;
? ? ? }BFC
頁面元素中的隱含屬性：
Block Formatting Context即塊格式化上下文，簡稱BFC當(dāng)開啟元素的
BFC以后，元素會變成一個獨(dú)立的布局區(qū)域，不會在布局上影響到外面的元素
BFC理解為一個封閉的大箱子，箱子內(nèi)部的元素不會影響到外部。
開啟BFC后，元素將會具有如下的特性：
-
父元素的垂直外邊距不會和子元素重疊
-
開啟
BFC的元素不會被浮動元素所覆蓋 -
開啟
BFC的元素可以包含浮動的子元素（可解決高度塌陷）
如何開啟元素的BFC：
-
設(shè)置元素浮動（不推薦）
-
使用這種方式開啟，雖然可以撐開父元素，但是會導(dǎo)致父元素的寬度丟失
-
而且使用這種方式也會導(dǎo)致下邊的元素上移，不能解決問題文章來源：http://www.zghlxwxcb.cn/news/detail-785207.html
-
-
設(shè)置元素為
inline-block（不推薦）-
可以解決問題，但是會導(dǎo)致寬度丟失，不推薦使用這種方式
-
-
將元素的overflow設(shè)置為一個非visible的值 （推薦）
-
scroll、auto、hidden
-
-
設(shè)置元素絕對定位
-
元素也會脫離文檔流，雖然可以撐開父元素，但是會導(dǎo)致父元素的寬度丟失
-
而且使用這種方式也會導(dǎo)致下邊的元素上移，不能解決問題
-
推薦方式：將
overflow設(shè)置為hidden是副作用最小的開啟BFC的方式文章來源地址http://www.zghlxwxcb.cn/news/detail-785207.html
到了這里，關(guān)于html+css 浮動、清除浮動、什么是BFC？、如何開啟BFC的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
