圖文詳解CSS基礎清除浮動

清除浮動

盒子高度問題

在標準流中內容的高度可以撐起盒子的高度

<style>

        div{
            background-color: red;
        }

        p{
            width: 200px;
            height: 100px;
            background-color: blue;
        }

</style>

<div>
    <p></p>
</div>

在浮動流中浮動元素內容的高不可以撐起盒子的高

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

清除浮動方式一

#在前面的父盒子中加入高度

範例程式碼:

<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">
大娃

二娃

三娃

   </ul>

</div>

<div class="box2">

   <ul class="ul02">

李南江

极客江南

江哥

   </ul>

</div>

- 新增高度前:   -  

- 加高後   -  

- 注意點:    - 在企業開發中能不寫高度就不寫高度,##- 注意點:    - 在企業開發中能不寫高度就不寫高度, 所以這種方式`不常用`

清除浮動方式二- 利用clear:both;屬性清除前面浮動元素對我的影響 

- 範例程式碼:html

<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">
大娃
二娃
三娃
   </ul>
</div>
<div class="box2">
   <ul class="ul02">
李南江
极客江南
江哥
   </ul>
</div>

- 新增clear: both;前: -  - 新增後; [](http://upload-images.jianshu.io/upload_images/647982-7b618617223102be.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) - 注意點：   bo-com 使用之後使用之後屬性會失效, 所以`不常用`

清除浮動方式三- 在兩個有浮動子元素的盒子之間添加一個額外的區塊級元素 

- 範例程式碼:html

<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{
           /利用额外块级元素实现margin/
           height: 20px;
           background-color: deepskyblue;
       }
</style>
<div class="box1">
   <ul class="ul01">
大娃
二娃
三娃
   </ul>
</div>
<!--这里-->
<div class="wall h20"></div>
<div class="box2">
   <ul class="ul02">
李南江
极客江南
江哥
   </ul>
</div>

- 增加額外區塊級元素前   -   

- 增加額外區塊元素後   -  - 注意點   - 在外牆法中可以透過設定額外標籤的高度來實現margin效果   - 搜狐中大量使用了這個技術, 但是由於需要添加大量無意義的標籤, 所以`不常用`

清除浮動方式四- 在前面一個盒子的最後添加一個額外的區塊級元素

 - 範例程式碼html

<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">
大娃
二娃
三娃
   </ul>
   <!--这里-->
   <div class="wall"></div>
</div>


<div class="box2">
   <ul class="ul02">
李南江
极客江南
江哥
   </ul>
</div>- 添加额外块级元素前
    -  ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 添加额外块级元素后
    - ![](http://upload-images.jianshu.io/upload_images/647982-7799130801c08c6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 注意點:
    -內牆法會自動撐起盒子的高度, 所以可以直接設定margin屬性
    - 和內牆法一樣需要增加很多無意義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢


清除浮動方式五
- 什麼是overflow:hidden?

    - overflow:hidden的作用是清除溢出盒子邊框外的內容

- 範例程式碼

```html
.test{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
            overflow: hidden;
}

<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

新增overflow:hidden前

#新增overflow:hidden後

如何利用overflow:hidden;清除浮動

為前面一個盒子加入overflow:hidden屬性######範例程式碼######

```html
<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">
大娃
二娃
三娃
   </ul>
</div>
<div class="box2">
   <ul class="ul02">
李南江
极客江南
江哥
   </ul>
</div>- 添加overflow:hidden;前
    - ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


- 添加overflow:hidden;后
    - ![](http://upload-images.jianshu.io/upload_images/647982-7799130801c08c6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 注意点:
    - 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
    - IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
        - 实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制
    - 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突

- *zoom:1;和_zoom:1的区别
    - 这个是hack写法，用来识别不同版本的IE浏览器
    - _后面的属性只有IE6能识别
    - *后面的属性 IE6 IE7能识别


###清除浮动方式六
- 给前面的盒子添加伪元素来清除浮动

- 示例代码 

```html

<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 {
            /*生成内容作为最后一个元素*/
            content: "";
            /*使生成的元素以块级元素显示,占满剩余空间*/
            display: block;
            /*避免生成内容破坏原有布局的高度*/
            height: 0;
            /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
            /*重点是这一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 触发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>

添加伪元素前

添加伪元素后

注意点:

本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素

添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性

CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

清除浮动方式七

给前面的盒子添加双伪元素来清除浮动

示例代码

<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;
            /*重点是这一句*/
            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>

添加双伪元素前

添加双伪元素后

注意点:

添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性

先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白

支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；

不支持 BFC的浏览器 （IE5-7），通过触发 hasLayout 闭合浮动。

以上是圖文詳解CSS基礎清除浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章！