CSS—浮动（内容多图，建议wifi下打开）

---

浮动是一个很有用的属性，对于网页布局，特殊效果的实现都很有用。

• float的基本原理
  float:left;//元素向左浮动
  float:right;//元素向右浮动

为div1设置 float：left之后
div为块级元素，所以每次新建都会另起一行。我们想象一下，这些未设置浮动的div盒子是在一个文档流内（假想一个平面内），当设置div1为左浮动后，他就在另一个高于原文档流的文档流内（假想，在高于原来平面的一个平面内）,但是div1已经在最左侧，所以左浮动，对于他没有表现上的改变，div2的改变才是需要关注的，这么复杂的原理，浏览器肯定也会出现兼容性的问题。
IE7（包括IE7以前） 现代浏览器及IE7以后

【个人情绪】为什么一提到兼容性，IE6.7就出来。。因为那几年，IE懈怠了，以为自己唯我独尊，所以不更新内核，渲染出什么来了？？！！
明显，IE6、7是不按照我上面写的浮动机制渲染的，IE7以后及现代浏览器，都是按照我上面写的浮动机制来的。
div1脱离文档流，div2占据div1原有文档流的位置。
细心一下，可以发现，div2上的文本内容被div1挤下去了，对于这种显现，我假象了一下，文本内容与文本内容的父元素不是在一个文档流内，而是高于父元素的文档流，这样就可以看到文本div2与浮动的div1在一个文档流内。

div1与div2分别设置左浮动后的效果
div1与div2均设置左浮动后，二者就在一个文档流内，所以就一个接着一个排着了。
div1左浮动，div2右浮动
【11月22日补充】
初始
将第二个设为浮动后，第三个在原来第二个的位置
可见，元素div2设置浮动后，并没有跑到div1的地方，是我以前误以为设置浮动后，就会浮动于另一层，div2应该也可以浮动到div1的上面，其实不是，只是浮动到他所在的这一行的最左面。

• float的应用

• 关于网页布局
  #box{
  /height: 150px;/
  width: 205px;
  margin: 0 auto;
  border: 5px solid green;
  }
  #qq{
  height: 100px;
  width: 100px;
  background: red;
  float: left;
  }
  #aa{
  height: 100px;
  width: 100px;
  background: blue;
  float: right;

       }
       #gg{
           clear: both;       //清除浮动
           height: 50px;
           width: 205px;
           background: yellow; 
       }
   //以上是<style></style>内的设置
   <div id="box">
       <div id="qq">div1</div>
       <div id="aa">div2</div>
       <div id="gg">div3</div>             
   </div>
  

效果
上图是参照上面的代码，最后生成的效果，div1与div2在box内分别左浮动与右浮动，box分别设置了宽度与高度，并且作了居中处理。div3也可以正常的在div1与div2之下。是我们希望的样子。
但是下图是在这样的代码下的效果
<style type="text/css">
#box{
border: 5px solid green;
}
#qq{
height: 100px;
width: 100px;
background: red;
float: left;
}
#aa{
height: 100px;
width: 100px;
background: blue;
float: right;

        }
        #gg{
            height: 50px;
            width: 205px;
            background: yellow; 
        }
    </style>

效果

由于div1与div2均设置浮动，脱离文档流后，div3占据了他们原来的位置。
父元素box没有设置宽度，所以与body同宽，横跨了整个页面。因为里面有内容div3所以其高度同div3的高度。这也是未采取任何拯救措施的样子。

现在，就来拯救一下，网页布局

【第一步、去除浮动】
#gg{clear: both;}//both:为左右浮动都去。同理可以去除左浮动left，右浮动right

效果
发现去除掉div1与div2的浮动后，div3则排在了div1与div2那一行的下面。而且外层div（即box）也将高度扩大了。
【第二步、设置外层div的宽度】
#box{width: 205px;}
效果
发现已经初步达到，我们预期的效果。也证实了，子元素浮动的边界是父元素。
【第三步、居中】
text-line
在body标签内进行text-align=center只会使body内所有有文本的盒子呢，文本内容居中。所以达不到，我们想要的效果。
效果
margin
是盒子的外边界，关于css盒子的概念，我会另写一篇的。
#box{margin: 0 auto;}//前提设置了宽度width
效果

• 首字符浮动
  这是对文本内容的布局，我习惯在文本内容布局之前，对文本内容的padding与magin均清零。对段落p的行高，字体进行声明，避免浏览器默认效果的不同，导致网页不兼容。而且有时候，文本内容选择的字体也会导致浏览器不兼容。
  p{
  margin: 0;
  padding: 0;
  height: 1rem;
  line-height: 1.5rem;
  }//默认标准化设置，你面浏览器的默认效果
  #sap
  {
  padding: 0 15px;
  float:left;
  font-size: 4.5rem;
  font-weight: bold;
  line-height:4.45rem;
  }
  //html结构设置
  <p>
  <span id="sap">T</span>This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text.……This is some text.
  </p>
  我们希望的样子
  蓝色部分是我标注的，每一个元素的设置都是有拿捏的。
  来看一下失败的例子。

• 未对p进行初始标准化设置
  导致网页效果的差异性

  
  左面谷歌，右面IE

• 使用了特殊字体
  IE对该字体不是很兼容，发现该字体并没有居中

  
  左火狐，右IE
  

  刚才我并没有对字体进行标准化设置，网页也会出现不一样的效果，所以对字体也应该尽量的同一。

• line-height的设置
  左：line-height：4.6rem，右：line-height：4.5rem
  为什么会出现仅因为0.1rem的差距，就有这样的差距呢？
  首先，需要知道span标签，为行内元素，不具备高宽的设置，其高是由内容决定。在单行，文本情况下，line-height的高度决定了其高度。而这样也恰巧满足了line-height=height。导致文本内容居中。然后在看下图就明白了。
  QQ截图20141120133114.png
  浮动元素右面的段落每一个的line-height为1.5rem，三行，为4.5rem。当浮动元素设置为4.6rem时必然会占用右面下一个段落的位置，导致左面出现空白。
  欢迎补充与指正