关于浮动的一些记录

作者: 陈智涛 | 来源:发表于2017-02-22 18:30 被阅读0次

关于浮动的一些记录
浅谈CSS关于清除浮动的三种方法
关于浮动
关于浮动
关于CMS 浮动垃圾的一些理解
我的时间日记181226
我的时间日记181227
我的时间日记20180103
我的时间日记20190113
我的时间日记20190118

1、是什么浮动？

浮动是CSS的一种属性，float会让元素左右移动，直到它的外边缘碰到它的包含框或者另一个浮动元素框的边缘。浮动元素不存在于的文档流中，文档流中的元素也不会感知到浮动元素的存在。
举例说明：
(1)比如父容器中有三个子元素分别向左浮动，则它的父容器则会感知不到子元素的存在而形成父容器高度没有被撑开的现象

<!DOCTYPE html>
<html>
   <head>
       <meta charset = "uft-8">
   
   </head>
   <body>
       <div style="border: solid 5px #0e0; width:300px;" > 
           <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> 
           <div style="height: 100px; width: 100px; background-color: Green;float:left; "> </div> 
           <div style="height: 100px; width: 100px; background-color: Yellow;float:left;"> </div> 
       </div>

   </body>
</html>

屏幕快照 2017-02-22 下午4.51.03.png

(2)浮动会对其后续的元素的位置产生影响

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="content">
    <div class="menu">侧边栏固定宽度</div>
    <div class="aside">侧边栏固定宽度</div>
    <div class="main">内容区块自适应宽度</div>    
  </div>
  <div id="footer">我是 footer，但我的样式出现了问题</div>
  
  <style>
  .aside{
    width: 150px;
    height: 300px;
    background: red;
    float: right;
  }
  .menu{
    width: 150px;
    height: 300px;
    background: red;
    float: left;
  }
  .main{
    margin-right: 160px;
    margin-left: 160px;
    background: blue;
    height: 200px;
  }
  #footer{
    background: grey;
  }
  
  </style>
</body>
</html>

屏幕快照 2017-02-22 下午9.32.25.png

(3)如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动。

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
    <div style="border: solid 5px #0e0; width:250px;">
        <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
        </div>
    </div>

    </body>
</html>

屏幕快照 2017-02-22 下午4.57.32.png

(3)如果浮动元素的高度不一样，向下移动时就会出现一种卡主了的现象

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
    <div style="border: solid 5px #0e0; width:250px;">
      <div style="height: 120px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
  </div>
    </div>

    </body>
</html>

屏幕快照 2017-02-22 下午5.01.33.png

（4）浮动会让元素脱离普通流, 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.

不浮动：

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
     <div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red; "></div>
      <div style="height: 100px; width: 100px; background-color: Green;">
         11111
         111111
         111111
         11111
      </div>
  </div>
    </div>

    </body>
</html>

屏幕快照 2017-02-22 下午5.43.19.png

浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
     <div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red; float:left"></div>
      <div style="height: 100px; width: 100px; background-color: Green;">
         11111
         111111
         111111
         11111
      </div>
  </div>
    </div>

    </body>
</html>

屏幕快照 2017-02-22 下午5.44.46.png

可以看出浮动后虽然绿色div布局不受浮动影响，正常布局，但是文字部分却被挤到了红色浮动div外边。要想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left，right，both，none表示框的哪些边不挨着浮动框

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
     <div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red; float:left"></div>
      <div style="height: 100px; width: 100px; background-color: Green; clear:both">
         11111
         111111
         111111
         11111
      </div>
  </div>
    </div>

    </body>
</html>

屏幕快照 2017-02-22 下午5.43.19.png

(5)块级元素浮动宽度收缩

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">这是div</div>
  <span>这是span</span>
  
  <style>
  .box{
    float: left;
    background: red;
  }
  span{
    float: left;
    background: blue;
    width: 100px;
    height: 50px;
    margin: 10px;
  };
  
  
  </style>
</body>
</html>

屏幕快照 2017-02-22 下午9.05.28.png
而且行内元素浮动以块级特性呈现，不用再使用display:inline-block;

（6）用浮动实现两栏布局(边栏固定，主栏宽度随窗口大小改变)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="aside">侧边栏固定宽度</div>
  <div class="main">内容区块自适应宽度</div>
  
  <style>
  .aside{
    width: 150px;
    height: 400px;
    background: red;
    float: left;
  }
  .main{
    margin-left: 160px;
    background: blue;
    height: 400px;
  }
  
  </style>
</body>
</html>

屏幕快照 2017-02-22 下午9.13.40.png

2.清理浮动

正如1（1）所讲，浮动的元素不被文档流中的元素识别，导致父容器高度塌陷。因此需要做清理浮动的操作
clear属性：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>
<body>
 <div class="box box1">box1</div>
 <div class="box box2">box2</div>
 <div class="box box3">box3</div>
 
 <style>
   .box{
     width: 100px;
     height: 50px;
     border: 1px solid;
     float: left;
   }
   .box2{
     clear: left;// clear:right 是否有效?
   }
 </style>

</body>
</html>

屏幕快照 2017-02-22 下午9.24.03.png
注意：如果上面的代码改为clear: right;是无效的，该属性只对自身有效果。

由解决父容器高度塌陷问题引出解决浮动的几种方案

（1）在父容器中增加一个无意义的标签，并对这个标签添加清除浮动样式clear:both

<!DOCTYPE html>
<html>
   <head>
       <meta charset = "uft-8">
   
   </head>
   <body>
    <div style="border: solid 5px #0e0; width:300px;">
     <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
     </div>
     <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
     </div>
     <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
     </div>
     <div style="clear:both"></div>
 </div>

   </body>
</html>

屏幕快照 2017-02-22 下午6.00.11.png

缺点：增加了一个无意义的标签

（2）BFC清理浮动

BFC的特性

BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
按照BFC的定义，只有在同一个BFC中，两个元素（相邻或者嵌套），只要他们之间没有阻挡（边框，非空内容，padding等）才会发生margin的重叠。
BFC不会重叠浮动元素
BFC可以包含浮动

如何形成BFC，有如下几种方法：

float为 left或者right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed

总结：只要使父容器形成一个BFC，就可以清除浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
    
    </head>
    <body>
     <div style="border: solid 5px #0e0; width:300px; overflow:hidden">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>

  </div>

    </body>
</html>

屏幕快照 2017-02-22 下午6.00.11.png

缺点：
使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。。。

（3）hasLayout
IE6、7内有个hasLayout的概念，当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。下面使元素hasLayout为true

position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true
（4）通用的清除浮动的方案
把清楚浮动写成一个类，直接引用即可

/*方法1*/
 .clearfix{
     *zoom:1;/*可省略*/
 }
 .clearfix:after{
     content:"";
     display:block;
     clear:left;
 }


 /*方法2*/
 .clearfix{
   *zoom:1;/*可省略*/
 }
 .clearfix:after{
   content:"";
     display:table;
     clear:both;
 }

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "uft-8">
        <style>
        .clearfix{
            *zoom:1;/*可省略*/
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
        </style>
    
    </head>
    <body>
     <div style="border: solid 5px #0e0; width:300px; " class = "clearfix">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>

  </div>

    </body>
</html>