浮动以及清除浮动的常见方法

关于浮动

CSS的布局有三种机制 ，一是标准流，即普通流，所有的元素都属于标准流；二是定位流，三则是定位流

浮动流组最开始是用来实现图文混排的效果，因为浮动元素压不住文字。我们如果只使用标准流来布局，很多效果是无法实现或者说实现起来比较麻烦，比如我们想多个元素拍成一行，又希望这一行的元素之间没有间隙且可以设置宽高，如果只用标准流来实现无疑是比较麻烦的，但是浮动就可以很容易的实现

<div class="father">
  <div class="son"></div>
  <div class="son1"></div>
  <div class="son2"></div>
  <div class="son3"></div>
</div>
<style>
  .father {
    width: 200px;
    height: 200px;
    width: 500px;
    border: 1px solid #000;
    background-color: teal;
    display: table;
  }
  .son,
  .son1,
  .son2,
  .son3 {
    width: 50px;
    height: 100px;
    margin-top: 30px;
    background-color: rosybrown;
    float: left;
    
  }
  .son {
    background-color: tomato;
  }
  .son1 {
   background-color: wheat;
  }
  .son2 {
    background-color: rgb(90, 16, 16);
  }
  .son3 {
    background-color: rgb(77, 6, 95);
  }

</style>

           

效果为

元素浮动之后，就会脱离标准流。关于这一点可以理解成标准流中的盒子都是沉在水底的，如果一个元素浮动，后面的标准流的元素就会占据那个浮动元素在浮动之前的标准流的位置，这也是为什么两个相邻元素，前一个浮动，就会覆盖后面那个元素的原因

浮动元素的特点

1. 脱离标准流
2. 无法撑起父级元素的高度
3. 浮动之后margin：0 auto不起作用
4. 可以设置宽高以及内外边距

清除浮动

但是浮动也带来了一些不太好的后果，比如父元素未设置高度，其子元素浮动之后，不同于标准流，浮动后元素是撑不起父元素的高度的，此时我们就需要清除浮动，下面来介绍一些比较常见的方法

定高法

顾名思义，既然浮动后子元素撑不起子元素高度，那就直接给父元素设置一个固定高就好了，但是很显然，这样是不实用的

添加子元素法

给父盒子末尾添加一个空的子元素，然后给这个元素设置clear属性

clear有三个属性值，分别是left（清除左侧浮动，不允许左侧有浮动元素），right（清除右侧浮动），both（同时清除两侧的浮动）。我们在使用时直接用clear：both就可以了

.father {
    
    border: 1px solid #000;
    background-color: teal;
   
  }
  .clearfix{
       clear: both;
      
  }
  .son,
  .son1 {
    width: 50px;
    height: 100px;
    background-color: rosybrown;
    float: left;
    
  }
  .son {
    background-color: tomato;
  }
  .son1 {
   background-color: wheat;
  }
  

</style>
           

效果图为

此时父级元素就可以自动获取到浮动元素的高度

多说一句，虽然这样可以实现清除浮动影响的效果，但是每一次都要去加一个元素，未免有些麻烦，所以又提出了一种伪元素解决办法

伪元素清除法

其实本质上就是添加子元素法的升级版，直接用代码来介绍

<div class="father clearfix">
  <div class="son"></div>
  <div class="son1"></div>
 
 
</div>
<style>
  .father {
    
    border: 1px solid #000;
    background-color: teal;
    display: table;
    zoom: 1;
    /* 这是为了兼容ie6，7 */
  }
  .clearfix:after{
       height: 0;
       visibility: hidden;
       clear: both;
       content: '';
       /* content必须要设置，哪怕里面什么也不写 */
  }
  .son,
  .son1 {
    width: 50px;
    height: 100px;
    background-color: rosybrown;
    float: left;
    
  }
  .son {
    background-color: tomato;
  }
  .son1 {
   background-color: wheat;
  }
  

</style>
           

这是比较常用也比较推荐的一种方法，但是在ie6，7中是不支持：after的，所以要在父元素中添加zoom：1以用来兼容

此处也介绍一个双伪元素清除法

<div class="father clearfix">
  <div class="son"></div>
  <div class="son1"></div>
  
 
</div>
<style>
 .father {
    border: 1px solid #000;
    background-color: teal;
    display: table;
    
  }
  .clearfix:after，
  .clearfix:before {
       display: block;
       content: '';
       /* content必须要设置，哪怕里面什么也不写 */
  }
  .clearfix:after，{
    clear: both;
  }
  .clearfix {
   *zoom: 1;
  }
  '''''省略子元素的样式设置
  </style>
           

overflow方法

使用方法：

• 给父元素设置overflow：hidden
• 给父元素设置overflow：auto
• 给父元素设置overflow:scroll

这几种使用方法都能实现清除浮动影响的效果，且父元素需要设置宽度，不要设置高度。第一种的弊端是元素过多时，不会自动换行，会隐藏掉可能需要显示的元素。而后两者则是会出现滚动条，如果不介意出现滚动条也可以使用。

父元素浮动法

为了让子元素撑得起父元素高度，可以让父元素也浮动，但是显然这样又要继续解决清除浮动的问题，得不偿失。

dispaly：table

给父元素添加display：table属性，也可以实现，但是可能会出现未知问题，不太推荐使用