日韩人妻精品一二三,屌视频一区二区三区

清除浮動(dòng)

盒子高度問題

在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起盒子的高度

<style>

        div{
            background-color: red;
        }

        p{
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        
</style>
    
<div>
    <p></p>
</div>

在浮動(dòng)流中浮動(dòng)元素內(nèi)容的高不可以撐起盒子的高

<style>

        div{
            background-color: red;
        }

        p{
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        
</style>
    
<div>
    <p></p>
</div>

清除浮動(dòng)方式一

給前面的父盒子添加高度
示例代碼:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
        /*這里*/
        height: 50px;
    }
    .box2{
        background-color: purple;
    }
    ul{
        list-style: none;
    }
    .ul01 li{
        background-color: blue;
    }
    .ul02 li{
        background-color: green;
    }
    ul li{
        float: left;
    }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加高度前:
添加高度后
注意點(diǎn):
- 在企業(yè)開發(fā)中能不寫高度就不寫高度, 所以這種方式不常用

清除浮動(dòng)方式二

利用clear:both;屬性清除前面浮動(dòng)元素對(duì)我的影響
示例代碼:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*這里*/
            clear: both;
            /*margin無效*/
            margin-top: 30px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加clear: both;前:
添加clear: both;后
注意點(diǎn):
- 使用clear:both之后margin屬性會(huì)失效, 所以不常用

清除浮動(dòng)方式三

在兩個(gè)有浮動(dòng)子元素的盒子之間添加一個(gè)額外的塊級(jí)元素
示例代碼:


<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*這里*/
        .wall{
            clear: both;
        }
        .h20{
            /*利用額外塊級(jí)元素實(shí)現(xiàn)margin*/
            height: 20px;
            background-color: deepskyblue;
        }
</style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>

<!--這里-->
<div class="wall h20"></div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加額外塊級(jí)元素前
添加額外塊級(jí)元素后
注意點(diǎn)
- 在外墻法中可以通過設(shè)置額外標(biāo)簽的高度來實(shí)現(xiàn)margin效果
- 搜狐中大量使用了這個(gè)技術(shù), 但是由于需要添加大量無意義的標(biāo)簽, 所以不常用

清除浮動(dòng)方式四

在前面一個(gè)盒子的最后添加一個(gè)額外的塊級(jí)元素
示例代碼

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*這里*/
        .wall{
            clear: both;
        }
</style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
    <!--這里-->
    <div class="wall"></div>
</div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加額外塊級(jí)元素前
添加額外塊級(jí)元素后
注意點(diǎn):
- 內(nèi)墻法會(huì)自動(dòng)撐起盒子的高度, 所以可以直接設(shè)置margin屬性
- 和內(nèi)墻法一樣需要添加很多無意義的空標(biāo)簽，有違結(jié)構(gòu)與表現(xiàn)的分離，在后期維護(hù)中將是噩夢(mèng)

清除浮動(dòng)方式五

什么是overflow:hidden?
- overflow:hidden的作用是清除溢出盒子邊框外的內(nèi)容
示例代碼

.test{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
            overflow: hidden;
}
        
<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

添加overflow:hidden前
添加overflow:hidden后

如何利用overflow:hidden;清除浮動(dòng)
- 給前面一個(gè)盒子添加overflow:hidden屬性
示例代碼

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*這里*/
            overflow: hidden;
            *zoom:1;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加overflow:hidden;前

添加overflow:hidden;后
注意點(diǎn):
- 由于overflow:hidden可以撐起盒子的高度, 所以可以直接設(shè)置margin屬性
- IE8以前不支持利用overflow:hidden來清除浮動(dòng), 所以需要加上一個(gè)*zoom:1;
  - 實(shí)際上*zoom:1能夠觸發(fā)IE8之前IE瀏覽器的hasLayout機(jī)制
- 優(yōu)點(diǎn)可以不用添加額外的標(biāo)簽又可以撐起父元素的高度, 缺點(diǎn)和定位結(jié)合在一起使用時(shí)會(huì)有沖突
*zoom:1;和_zoom:1的區(qū)別
- 這個(gè)是hack寫法，用來識(shí)別不同版本的IE瀏覽器
- _后面的屬性只有IE6能識(shí)別
- *后面的屬性 IE6 IE7能識(shí)別

清除浮動(dòng)方式六

給前面的盒子添加偽元素來清除浮動(dòng)
示例代碼

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }
        
        /*這里*/
        .clearfix:after {
            /*生成內(nèi)容作為最后一個(gè)元素*/
            content: "";
            /*使生成的元素以塊級(jí)元素顯示,占滿剩余空間*/
            display: block;
            /*避免生成內(nèi)容破壞原有布局的高度*/
            height: 0;
            /*使生成的內(nèi)容不可見，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進(jìn)行點(diǎn)擊和交互*/
            visibility: hidden;
            /*重點(diǎn)是這一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 觸發(fā)IE hasLayout*/
            *zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加偽元素前
添加偽元素后
注意點(diǎn):
- 本質(zhì)上和內(nèi)墻法一樣, 都是在前面一個(gè)盒子的最后添加一個(gè)額外的塊級(jí)元素
- 添加偽元素后可以撐起盒子的高度, 所以可以直接設(shè)置margin屬性
- CSS中還有一個(gè)東西叫做偽類, 偽元素和偽類不是同一個(gè)東西

清除浮動(dòng)方式七

給前面的盒子添加雙偽元素來清除浮動(dòng)
示例代碼

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }
        
        /*這里*/
        .cf:before,.cf:after {
            content:"";
            display:table;
            /*重點(diǎn)是這一句*/
            clear:both;
        }
        .cf {
            zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>極客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加雙偽元素前
添加雙偽元素后
注意點(diǎn):
- 添加偽元素后可以撐起盒子的高度, 所以可以直接設(shè)置margin屬性
- 先知道有這些方式, 原理需要學(xué)習(xí)到BFC和hasLayout才能明白
- 支持BFC的瀏覽器（IE8+，firefox，chrome，safari）通過創(chuàng)建新的BFC閉合浮動(dòng)；
- 不支持 BFC的瀏覽器（IE5-7），通過觸發(fā) hasLayout 閉合浮動(dòng)。

學(xué)習(xí)交流方式:
1.微信公眾賬號(hào)搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學(xué)習(xí)交流群:
302942894 / 289964053 / 11550038

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

16-CSS基礎(chǔ)-清除浮動(dòng)

16-CSS基礎(chǔ)-清除浮動(dòng)

清除浮動(dòng)

盒子高度問題

清除浮動(dòng)方式一

清除浮動(dòng)方式二

清除浮動(dòng)方式三

清除浮動(dòng)方式四

清除浮動(dòng)方式五

清除浮動(dòng)方式六

清除浮動(dòng)方式七

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

16-CSS基礎(chǔ)-清除浮動(dòng)

清除浮動(dòng)

盒子高度問題

清除浮動(dòng)方式一

清除浮動(dòng)方式二

清除浮動(dòng)方式三

清除浮動(dòng)方式四

清除浮動(dòng)方式五

清除浮動(dòng)方式六

清除浮動(dòng)方式七

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av