CSS清除浮动float常用方法总结

关于css清除浮动

认识css这么久了，float早已成为网页布局的老朋友了，关于css浮动的清除，各路大牛都已经谈过，本该早已烂熟于心，奈何寒冷使人堕落，一直疏于归纳整理。时至今日才然我决心要梳理一下css的清除浮动。
：
关于css浮动的清除，以前一直被自己置之不理，是因为没有意识到清除浮动的意义，换句话说不清除清除浮动可能导致哪些后果。

带着这个问题我们来看一下，不清除浮动可能导致哪些后果？

• 什么是文档流/普通流？
  首先我们应该明白css的定位机制，共三种：

  1.正常的文档流
  2.float
  3.poistion

• 什么脱离文档流？
  那什么是脱离文档流呢，脱离文档流是指某标签本该属于文档流管理的，本该从左到右从上到下按照文档规则显示的标签脱离文档管理，丢失了在原文档中的位置。

  那么有哪些情况会导致标签脱离文档流呢

  1.flaot 浮动
  2.poistion=absolute 绝对定位

  我们来看一个小demo

  css代码

  
      .left{
      width:40%;
      height:100px;
      line-height:100px;
      text-align:center;
      background-color:red;
      float:left;
      }
      .right{
      width:40%;
      height:100px;
      line-height:100px;
      text-align:center;
      background-color:yellow;
      float:left;
      }
      .footer{
      width:100%;
      height:200px;
      background-color:blue;
      }
  

      html代码
  

  <nav>
      <div class="left">我是左边</div>
      <div class="right">我是右边</div>
  </nav>
  <div class="footer"></div>

  效果
  
  我们可以看到，本打算在下面橙色的叫footer的div羞涩的躲到导航栏nav后面去了，也就说nav中的两个div并没有撑开nav的高度，这就是浮动导致脱离文档引起的高度塌陷。

  没有规矩则不成方圆，不受文档管理，浮动布局却导致脱离文档，我们怎么做出规范的网页呢，所以我们需要清除浮动来解决浮动导致的脱离文档。

• 如何清除浮动？

  1. 首先我说一下新手的我最早用的方法，在nav后面加上一个div，样式写上clear：both(不允许左右两侧出现浮动元素)。但是这个方法有一个问题，就是改变了文档结构，多出了一个div。不建议大家在项目中使用

  html代码

  </nav>
  <div style="clear:both"></div>
  

  效果：nav 被撑开 footer正确的位于下方
  

  2. 此方法是方法一的进阶版本.给footer添加 clear:both，此方法也是常使用的方法之一。

  <div class="footer" style="clear:both">我是底部</div>

  3. 我们给浮动的标签的父元素也加上浮动。此方法优点是代码量少，但是有一个弊端对后面结构可能产生影响。

  html代码

  <nav style="float:left;">
      <div class="left">我是左边</div>
      <div class="right">我是右边</div>
  </nav

  4.为浮动元素的父元素设置display：table；此方法代码简单，但是改变了文档结构，父元素盒子模型丢失，影响后面定位，不建议使用。

  html代码

  <nav style="display:table;">
      <div class="left">我是左边</div>
      <div class="right">我是右边</div>
  </nav>

  5.为浮动元素的父元素设置overflow属性 取值hidden 或 auto 都可以清除浮动，overflow：hidden（隐藏溢出部分）此法唯一的弊端是如果导航栏有弹出菜单或者下拉列表都会被影藏掉

  html代码

  <nav style="overflow:auto;">
      <div class="left">我是左边</div>
      <div class="right">我是右边</div>
  </nav>

  6.利用内容生成的方式解决，此方法利用 after 伪类，在nav后面生成一个空的块。

  css代码

  .clearfix:after{
      content:'';
      display:block;
      clear:both;
  }

  html代码

  <nav class="clearfix">
  <div class="left">我是左边</div>
  <div class="right">我是右边</div>
  </nav>
  <div class="footer">我是底部</div>

  此方法虽然css代码量较为大，但是不会对后面页面造成任何影响，是处理最为干净的方法，很多网站都是采用此方法清除浮动，我们以百度为例，我们可以看百度的代码。
  

讲了很多，虽然讲得并不清楚，但写这篇博客得意义并不在仅仅在于它本身，以这样一个过程培养自己遇到问题多加思考和学习路上多加归纳总结的习惯，我相信“勤思逐明”的习惯，不仅对于编程学习，它更能让我们在人生的路上行得更远。

以上内容都为自己学习经验总结，仅作为自我学习笔记和初学学者参考，如有不正和不足之处欢迎指出。