浮动是一个很有用的属性，对于网页布局，特殊效果的实现都很有用。
-
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时必然会占用右面下一个段落的位置，导致左面出现空白。
欢迎补充与指正
网友评论