CSS设计指南笔记：浮动篇

浮动

• 文字绕排图片

 为了实现文本绕排图片的浮动效果，必须在标记中先写图片，然后再写环绕它的文本。
<img …… />
<p>…the paragraph text…</p>
p {margin:0; border:1px solid red;}
img {float:left; margin:0 4px 4px 0;}
以上规则会让图片浮动到左侧，从而让文本绕排到右侧

• 创建分栏

p {float:left; margin:0; width:200px; border:1px solid red;}
img {float:left; margin:0 4px 4px 0;}

同时浮动图片和“有宽度的”段落，会导致段落的文本绕排效果消失，而浮
动的段落也会尽可能向左向上移动。就这样，这个段落就构成了紧挨着图片的一栏。
这就是使用float 属性创建多栏布局的原理。换句话说，如果几个相邻的元素都具
有设定的宽度，都是浮动的，而且水平空间也足以容纳它们，它们就会并列排在
一行。

  要想强迫父元素包围其浮动的子元素有三种方式：

 为父元素应用overflow:hidden
 浮动父元素
 在父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元
素添加clearfix 类来加（当然，样式表中得需要相应的clearfix 规则）

 没有父元素时如何清除

<section>
<img src="images/rubber_duck3.jpg">
<p class="clearfix">This text sits next to the image and because the…</p>
<img src="images/beach_ball.jpg">
<p class="clearfix">This text is short, so the next image can float up…</p>
<img src="images/yellow_float.jpg">
<p class="clearfix">Because the previous image's text does not…</p>.
</section>

使用clearfix 规则呀！
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}