欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章,希望大家以后多多支持腳本之家!

相關(guān)文章

  • css overflow: hidden 的用法(溢出隱藏及清除浮動(dòng))

    overflow:hidden是經(jīng)常用到的一個(gè)css屬性,它有兩種常用用法:溢出隱藏和清除浮動(dòng),這里就為大家介紹一下,需要的朋友可以參考下
    2020-03-13
  • CSS實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)的方法

    這篇文章主要介紹了CSS實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)的方法,簡單介紹了浮動(dòng)的基本知識(shí),通過截圖代碼的形式給大家介紹了css清除浮動(dòng)的方法,需要的朋友可以參考下
    2019-12-05
  • Css實(shí)現(xiàn)清除浮動(dòng)的方法匯總

    這篇文章主要介紹了Css實(shí)現(xiàn)清除浮動(dòng)的方法匯總,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-07-11
  • 什么是BFC? CSS 使用偽元素清除浮動(dòng)的方法

    塊級(jí)格式化上下文,是一個(gè)獨(dú)立的渲染區(qū)域,讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離,使內(nèi)外元素的定位不會(huì)相互影響。這篇文章給大家介紹了CSS 使用偽元素清除浮動(dòng)的方
    2019-07-01
  • 輕松搞懂CSS浮動(dòng)與清除浮動(dòng)圖文詳解

    本文通過圖文并茂的形式給大家介紹了CSS浮動(dòng)與清除浮動(dòng)的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,,需要的朋友可以參考下
    2019-04-29
  • css 如何清除浮動(dòng)的示例代碼

    這篇文章主要介紹了css 如何清除浮動(dòng)的示例代碼,詳細(xì)的介紹了浮動(dòng)到底是什么和清理浮動(dòng)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看
    2018-11-12
  • CSS清楚浮動(dòng)clear:both的實(shí)例代碼

    本文通過多種方法給大家介紹CSS清楚浮動(dòng)clear:both的實(shí)例代碼,代碼簡單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2020-11-16

最新評(píng)論