浮动优缺点及清除浮动的方法

1. 浮动优缺点

设置浮动原则：一浮动全浮动
简介

浮动的元素会向左或向右移动,直到边缘碰到包含他的边框或另一个浮动元素的边缘为止.元素浮动以后会脱离标准流,所以在标准流的父盒子就像浮动元素不存在一样.

优点

图文排序时,更好的使文字围绕图片.
设置浮动的元素有inline-block(行内块元素)的特点,但是不同于inline-block：
1)相对于行内块浮动元素之间没有缝隙
2)而且浮动元素可以设置排序方向.而行内块是固定的

缺点

子元素浮动以后会脱离标准流,不能撑大父盒子,导致父盒子高度为0而塌陷.

2. 清除浮动的方法

1. 额外标签法（W3C推荐的方法）
   注意：添加的html标签必须是块级元素

 <div>
    <div style="float:left">xixi</div>
    <div style="float:left">haha</div>
    //在最后浮动元素后面添加新的标签，且添加clear：both属性
    <div style="clear: both;"></div>
  </div>

1
2
3
4
5
6
7

优点：通俗易懂，书写方便
缺点：新增无意义标签，结构化较差

2. 父级添加overflow（记：子不教父之过）

//overflow设置hidden 、auto 或 scroll 。一般使用 hidden
<div style="overflow: hidden;">
    <div style="float:left">xixi</div>
    <div style="clear: both;"></div>
  </div>

1
2
3
4
5
6

优点：书写简单
缺点：出现溢出隐藏

3. 父级添加after伪元素（记：子不教父之过）

代表网站：百度、网易、淘宝网

// 给父盒子添加clearfix类   
.clearfix:after{
      content: '';
      display: block;
      clear: both;
      visibility: hidden;
    }
    .clearfix {
      *zoom:1
    }

1
2
3
4
5
6
7
8
9
10
11

优点：没新增标签，结构更简单
缺点：需照顾低版本浏览器

4. 父级添加双伪元素（记：子不教父之过）

代表网站:小米、腾讯

//给父添加类clearfix
.clearfix:after,
    .clearfix::before{
      content: '';
      display: table;
     
    }
    .clearfix:after {
      clear: both;
    }
    .clearfix {
      *zoom:1
    }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

优点：代码更简洁
缺点：兼容低版本