WEB学习-CSS清除浮动

• 浮动的清除

• 来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。
      <div>
          <ul>
              <li>HTML</li>
              <li>CSS</li>
              <li>JS</li>
              <li>HTML5</li>
              <li>设计模式</li>
          </ul>
      </div>
  
      <div>
          <ul>
              <li>学习方法</li>
              <li>英语水平</li>
              <li>面试技巧</li>
          </ul>
      </div>
  我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。

  　第二个div中的li，去贴第一个div中最后一个li的边了。

  原因就是因为div没有高度，不能给自己浮动的元素，一个容器。

• 清除浮动方法1:给浮动的元素父控件加高度属性

• 如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能浮动属性才能生效。
  只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

• 清除浮动方法2：clear:both;

• 网页制作中，高度height很少出现。因为能被内容撑高！那也就是说，刚才我们讲解的方法1，工作中用的很少。
  那么如何不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？
  
      <div>
          <ul>
              <li>HTML</li>
              <li>CSS</li>
              <li>JS</li>
              <li>HTML5</li>
              <li>设计模式</li>
          </ul>
      </div>
  
      <div class="box2">  → 这个div写一个clear:both;属性
          <ul>
              <li>学习方法</li>
              <li>英语水平</li>
              <li>面试技巧</li>
          </ul>
      </div>
  
  clear:both;
  clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。
  这种方法有一个非常大的、致命的问题，margin失效了。

• 清除浮动方法3：隔墙法

•     <div class="box1">
          <ul>
              <li>HTML</li>
              <li>CSS</li>
              <li>JS</li>
              <li>HTML5</li>
              <li>设计模式</li>
          </ul>
      </div>
  
      <div class="cl h16"></div>
  
      <div class="box2">
          <ul>
              <li>学习方法</li>
              <li>英语水平</li>
              <li>面试技巧</li>
          </ul>
      </div>
  
        .cl{
          clear: both;
        }
       .h16{
          height: 16px;
        }
  
  　　还有添加了“内墙法”，在div内部添加一个 div
  

• 清除浮动方法4：overflow:hidden;

• overflow就是“溢出”的意思， hidden就是“隐藏”的意思。
  overflow:hidden; 
  表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。
  
  本意就是清除溢出到盒子外面的文字。但是，前端开发工程师又发现了，它能做偏方。
  
  一个父控件不能被自己浮动的子控件，撑出高度。但是，只要给父控件加上overflow:hidden; 那么，父控件就能被子控件撑出高了。这是一个偏方。
  
          div{
              width: 400px;
              border: 10px solid black;
              overflow: hidden;
          }

• 清除浮动的总结

• ） 加高法：
  浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。
  <div>   → 设置height
      <p></p>
      <p></p>
      <p></p>
  </div>
  
  <div>   → 设置height
      <p></p>
      <p></p>
      <p></p>
  </div>
  
  ) clear:both;法
  最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。
  <div>
      <p></p>
      <p></p>
      <p></p>
  </div>
  
  <div>   → clear:both;
      <p></p>
      <p></p>
      <p></p>
  </div>
  浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。
  ）隔墙法：
  在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
  墙用自己的身体当做了间隙。
  <div>
      <p></p>
      <p></p>
      <p></p>
  </div>
  
  <div class="cl h10"></div>
  
  <div>
      <p></p>
      <p></p>
      <p></p>
  </div>
  我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动的根据自己的儿子，撑出高度，我们就要想一些“小伎俩”，“奇淫技巧”。
  内墙法：
  <div>
      <p></p>
      <p></p>
      <p></p>
      <div class="cl h10"></div>
  </div>
  
  <div>
      <p></p>
      <p></p>
      <p></p>
  </div>
  内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
  
  ）overflow:hidden;
  这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
  我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。
  并且,overflow:hidden;能够让margin生效。

• 浏览器兼容问题

• 上述知识点遇见的浏览器兼容问题
  第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
  解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。
  height: 4px;
  _font-size: 0px;
  
  我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
  IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。
  比如：
  _background-color: green;
  
  解决微型盒子，正确写法：
  height: 10px;
  _font-size:;
  
  第二，IE6不支持用overflow:hidden;来清除浮动的
  解决办法，以毒攻毒。追加一条
  _zoom:;
  
  完整写法：
  overflow: hidden;
  _zoom:;
  实际上，_zoom:;能够触发浏览器hasLayout机制
  
  强调一点， overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，这个功能是IE6兼容的。不兼容的是overflow:hidden;清除浮动的时候。
  
  我们刚才学习了两个IE6的兼容问题，这两个IE6的兼容问题，都是通过多写一条hack来解决的。
  这个我们称为伴生属性。
  height:6px;
  _font-size:0;
  
  overflow:hidden;
  _zoom:;