CSS基础-清除浮动-李南江-白红宇

CSS基础-清除浮动-李南江

阅读量：6990 次

发布时间：2019-06-27

本文共 5960 字，大约阅读时间需要 19 分钟。

1240

清除浮动

盒子高度问题

在标准流中内容的高度可以撑起盒子的高度

1240

在浮动流中浮动元素内容的高不可以撑起盒子的高

1240

清除浮动方式一

给前面的父盒子添加高度

示例代码:
```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>

大娃

二娃

三娃

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

李南江

极客江南

江哥

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

大娃

二娃

三娃

</ul>

</div>

李南江

极客江南

江哥

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

大娃

二娃

三娃

</ul>

</div>

李南江

极客江南

江哥

</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;}
     
      我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字

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

大娃

二娃

三娃

</ul>

</div>

李南江

极客江南

江哥

</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
     
          
      
               
       大娃
        
       二娃
        
       三娃
    
       
            
        
                 
         李南江
        
         极客江南
        
         江哥

添加伪元素前

添加伪元素后

注意点:
- 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

清除浮动方式七

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

示例代码

添加双伪元素前

添加双伪元素后

注意点:
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- 先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白
- 支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
- 不支持 BFC的浏览器（IE5-7），通过触发 hasLayout 闭合浮动。