关于浮动的一些记录

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>

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

总结：

清理浮动的基本思路
1、使父容器形成BFC
2、利用 clear属性，清除浮动

最后编辑于：2017.12.06 00:11:02

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,928评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,192评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,468评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,186评论 1赞 286
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,295评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,374评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,403评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,186评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,610评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,906评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,075评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,755评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,393评论 3赞 320
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,079评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,313评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,934评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,963评论 2赞 351

关于浮动的一些记录

1、是什么浮动？

2.清理浮动

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

总结：

推荐阅读更多精彩内容