css中关于盒子模型与层模型的理解与应用（二）

题记：接css中关于盒子模型与层模型的理解与应用（一）

三，浮动与清除

浮动和清除是用来组织页面布局的又一柄利剑，这柄剑的剑刃就是 float 和 clear
属性。float可以脱离常规文本流，原来紧跟其后的元素就会在空间允许的情况下，
向上提升到与浮动元素平起平坐。clear则可以清除前面浮动的影响，使其待在原始位置。
实现目的：
一是可以实现报纸上那种文字绕排图片的效果。
二是可以让原来上下堆叠的块级元素，变成左右并列，从而实现布局中的分栏。

1）浮动

文字绕排图片

<img …… />
<p>11 22 33 44 55 55 ........</p>

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

p元素占据了父元素的位置，内容（数字）绕开浮动的图片（详细原因后面解释）。

创建分栏

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

两个元素都是float的（其实是p变成了line-block，后面解释）

围住浮动元素的三种方法
由于浮动脱离了文本流，有时候我们并不想要他影响到后面的元素，
比如下面：section部分不影响footer

<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;}
img {float:left;
footer {border:1px solid red;}

方法一为父元素增加 overflow:hudden

可靠地迫使父元素包含其浮动的子元素（绿框包含图片），父级的高度随子级容器及子级内容的高度而自适应。
方法二同时浮动父元素
浮动 section 以后，不管其子元素是否浮动，它都会紧紧地包围（也称收缩包裹）住它的子元素，因此，需要用 width:100% 再让 section 与浏览器容器同宽。并且防止下面footer挤上去，要给它应用 clear:left。这样footer以及footer下面的就不会挤上去了。

方法3添加非浮动的清除元素
就是在浮动元素后面添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素。
（1）直接简单的用HTML加一个子元素。
（2）用 CSS 来添加这个清除元素

.clearfix:after{content:".";display:block;height:0;
visibility:hidden;clear:both;
}
section {border:1px solid blue;  float:left; width:100%; ;}
img {float:left;}
footer {border:1px solid red; ｝

clear：both 相对于无视了浮动元素，排在其后面，又由于其内容为空，就相当于子元素把父元素撑开了。