css 浮动及清除浮动 详细讲解

浮动（重点）

   用法：  float: left | right

 特点：
1. 设置了浮动，该元素脱标。元素不占位置
2. 设置了浮动的元素可以在一行上显示
3. 浮动可以进行模式转换（行内块元素）

 作用：
  1. 制作网页导航【让块级元素在一行上显示就使用浮动】
 2. 实现图片和文字环绕效果

 3. 实现网页布局

什么情况下需要清除浮动

 

 ☞  在网页布局过程中，父容器如果没有设置高度，父容器中的所有子元素如果都设置了浮动===》 清除浮动
 ◇父容器没有设置高度
 ◇所有子元素都设置了浮动

浮动塌陷现象：   清除浮动 几种 方法：

☞怎么清除浮动？总结起来就三句话。关键是理解含义
    ◇  给父容器设置overflow：hidden;

     ◇ 使用clear属性清除浮动
     clear: left | right | both

       ◇使用伪元素清除浮动

 下面都是详细讲解，理解就好。自己跟着试一遍就明白了。

（HTML代码如下，随便画两个div盒子，明白浮动塌陷现象）

 

 

 

实际上出来样式是这样的

 

 

想要（想象）效果是这样的；

 

 

第二个div中的li,去贴第一个div中最后一个li的边了。

原因就是div没有高度，不能给自己浮动子元素，一个容器。

这种现象又被称为浮动塌陷现象

 

方法1：给浮动的元素添加高度

如果一个元素要浮动，父级元素一定要有高度。

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就清除浮动带来的影响了。

所以只需要给li的上级ul或者div设置一个height：40px；（只要是浮动元素的上级元素就可以。），那么第二个div就好挤下来，在第一个盒子下面显示出来。

方法2： clear:both;

但是在实际开发过程当中中，高度height很少出现,因为能被内容撑高。如果没有高度，清除浮动就需要事实上的确有这样的解决方法，是给他的上级添加一个clear：both；首先Clear就是清除的意思，both，代表左浮动和右浮动都清除掉。通俗一点来讲，就是说清除别人对我的影响。

但是会有一个缺陷那就是两个div之间，margin值失效了，无法设置。再重申一下，是指两个div之间。

 

方法3： 隔墙法：

在中间一个空盒子，然后给那个空盒子clear：both；（为了方便看效果，这里并没有放的是空盒子，而是放的有一个有高度、有粉色颜色的盒子。）

 

 

 

 

方法4： 内墙法（法3 4只区别是写的位置不一样。）

 

 

 

所谓的隔墙法就是创建一个div标签，清除浮动，再给个高度。（代码就一行）

 

方法5： overflow：hidden；（溢出隐藏）

 如果父元素中有超出父元素的标签（盒子），那么overflow:hidden 会将父元素中超出部分的元素隐藏。

给浮动塌陷的盒子添加一个：after伪类 （使用伪元素清除浮动）

 

 

 

 

 

写呢吗多，是为了方便理解。其实就三句话。理解含义才能知道使用场景

☞怎么清除浮动？总结起来就三句话。关键是理解含义
    ◇  给父容器设置overflow：hidden;

        ◇ 使用clear属性清除浮动
     clear: left | right | both

          ◇使用伪元素清除浮动