CSS 清除浮動(dòng)與BFC的方法

發(fā)布時(shí)間：2020-03-23 16:25:39 作者：梁柱

我要評(píng)論

這篇文章主要介紹了CSS 清除浮動(dòng)、BFC的相關(guān)資料,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

BFC

BFC：塊級(jí)格式化上下文

BFC的布局規(guī)則

內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。
BFC的區(qū)域不會(huì)與float box重疊。
每個(gè)盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

如何創(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.自適應(yīng)兩欄布局

3.清除浮動(dòng)。

清除浮動(dòng)

清除浮動(dòng)主要是為了解決，父元素因?yàn)樽蛹?jí)元素浮動(dòng)引起的內(nèi)部高度為0的問題。

清除浮動(dòng)的方法

1. 額外標(biāo)簽法

在最后一個(gè)浮動(dòng)標(biāo)簽后，新加一個(gè)標(biāo)簽，給其設(shè)置clear：both；(不推薦)

優(yōu)點(diǎn)：通俗易懂，方便

缺點(diǎn)：添加無意義標(biāo)簽，語義化差

<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.父級(jí)添加overflow屬性

通過觸發(fā)BFC方式，實(shí)現(xiàn)清除浮動(dòng)。（不推薦）

優(yōu)點(diǎn)：代碼簡潔

缺點(diǎn)：內(nèi)容增多的時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(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偽元素清除浮動(dòng)（推薦使用）

優(yōu)點(diǎn)：符合閉合浮動(dòng)思想，結(jié)構(gòu)語義化正確。

缺點(diǎn)：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; /*轉(zhuǎn)換為塊級(jí)元素*/
            height: 0; /*高度為0*/
            clear: both; /*清除浮動(dòng)*/
            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雙偽元素清除浮動(dòng)

優(yōu)點(diǎn)：不僅可以清除浮動(dòng)，也可以解決高度塌陷的問題（給父盒子添加類名clearfix）

缺點(diǎn)：用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>

總結(jié)

到此這篇關(guān)于CSS 清除浮動(dòng)、BFC的文章就介紹到這了,更多相關(guān)css 浮動(dòng) BFC內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！