CSS定位元素--浮动与清除

浮动和清除是用来组织页面布局的又一柄利剑，这柄剑的剑刃就是 float 和 clear属性。浮动，你看这俩字儿多形象，意思就是把元素从常规文档流中拿出来。拿出来干什么？一是能够实现传统出版物上那种文字绕排图片的效果，二是可让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。

浮动元素脱离了常规文档流以后，原来紧跟其后的元素就会在空间容许的状况下，向上提高到与浮动元素分庭抗礼。

若是浮动元素后面有两个段落，而你只想让第一段与浮动元素并列（就算旁边还能放下第二段，也不想让它上来），怎么办？用 clear 属性来“清除”第二段，而后它就乖乖地呆在浮动元素下面了。

浮动

CSS 设计 float 属性的主要目的，是为了实现文本绕排图片的效果。然而，这个属性竟然也成了建立多栏布局最简单的方式。

1.文本绕排图片

为了实现文本绕排图片的浮动效果，必须在标记中先写图片，而后再写环绕它的文本。

<img …… />
<p>…the paragraph text…</p>
CSS 规则以下。
/*为简明起见，省略了字体声明*/
p {margin:0; border:1px solid red;}
/*外边距防止图片紧挨文本*/
img {float:left; margin:0 4px 4px 0;}

以上规则会让图片浮动到左侧，从而让文本绕排到右侧

--浮动非图片元素时，必须给它设定宽度，不然后果难以预料。图片无所谓，由于它自己有默认的宽度。

2.建立分栏

围住浮动元素的三种方法

<section>
    <img src="images/rubber_duck2.jpg">
    <p>It's fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the
page.</footer>

section {border:1px solid blue; margin:0 0 10px 0;}
/*删除默认的上下外边距*/
p {margin 0;}
/*为简明起见，省略了字体声明*/
footer {border:1px solid red;}

--方法一：为父元素添加 overflow:hidden

--第一个方法很简单，缺点是不太直观，即为父元素应用 overflow:hidden，以强制它包围浮动元素。

--实际上， overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用overflow:hidden 以后，包含元素依然保持其设定的宽度，而超大的子内容则会被容器剪切掉。除此以外， overflow:hidden 还有另外一个做用，即它能可靠地迫使父元素包含其浮动的子元素。

--方法二：同时浮动父元素

--第二种促使父元素包围其浮动子元素的方法，是也让父元素浮动起来。

--方法三：添加非浮动的清除元素

--第三种强制父元素包含其浮动子元素的方法，就是给父元素的最后添加一个非浮动的子元素，而后清除该子元素。因为包含元素必定会包围非浮动的子元素，并且清除会让这个子元素位于（清除一侧）浮动元素的下方，所以包含元素必定会包含这个子元素——以及前面的浮动元素。在包含元素最后添加子元素做为清除元素的方式有两种。

方法一

第一种方式不太理想，也就是简单地在 HTML 标记中添加一个子元素，并给它应用

clear 属性。因为没有默认的样式，不会引入多余空间， div 元素很适合这个目的。

<section>
    <img src="images/rubber_duck.jpg">
    <p>It's fun to float.</p>
<div class="clear_me"></div>
</section>
<footer> Here is the footer element…</footer>
在此，我为 div 添加了一个类，以便于在 CSS 中添加它。
section {border:1px solid blue;}
img {float:left;}
.clear_me {clear:left;}
footer {border:1px solid red;}

方法二

再告诉你一个用 CSS 来添加这个清除元素的方法。首先，要给section 添加一个类。

<section class="clearfix">
    <img src="images/rubber_duck.jpg">
    <p>It's fun to float.</p>
</section>
<footer> Here is the footer element…</footer>

.clearfix:after {
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

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

1.为父元素应用 overflow:hidden

2.浮动父元素

3.在父元素内容的末尾添加非浮动元素，能够直接在标记中加，也能够经过给父元素添加 clearfix 类来加（固然，样式表中得须要相应的 clearfix 规则）

没有父元素时如何清除？

.clearfix:after {
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}
像这样给每一个段落都加上 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>