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>

清除浮动方式一

• 给前面的父盒子添加高度

• 示例代码:
  ```html

  <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>

• 
  

- 添加高度前:    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-37c3591032b43be9.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 添加高度后    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-fcb8f6fa15c6be76.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 注意点:    - 在企业开发中能不写高度就不写高度, 所以这种方式`不常用` ###清除浮动方式二 - 利用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-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-37c3591032b43be9.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 添加clear: both;后    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-7b618617223102be.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 注意点:    - 使用clear:both之后margin属性会失效, 所以`不常用` ###清除浮动方式三 - 在两个有浮动子元素的盒子之间添加一个额外的块级元素 - 示例代码: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>
- 添加额外块级元素前    -  ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-37c3591032b43be9.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 添加额外块级元素后    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-15566323325c738d.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240) - 注意点    - 在外墙法中可以通过设置额外标签的高度来实现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-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-37c3591032b43be9.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240)

- 添加额外块级元素后
    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-7799130801c08c6b.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/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-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-37c3591032b43be9.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/2/w/1240)


- 添加overflow:hidden;后
    - ![](http://upload-p_w_picpaths.jianshu.io/upload_p_w_picpaths/647982-7799130801c08c6b.png?p_w_picpathMogr2/auto-orient/strip%7Cp_w_picpathView2/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 闭合浮动。

转载于:https://blog.51cto.com/12246877/1870379