大家好，本周和大家分享的主题是CSS进阶。CSS不是编程语言，它的语法易懂，使用方便，但同时，利用CSS布局时我们也常常被CSS里各种属性的性质和使用搞得头晕目眩，完全不知所云（这也是CSS不是编程语言的弱势，其逻辑性和严密性不及编程语言）。因此，要想真正掌握CSS，掌握CSS的进阶应用非常必要。话不多说，开始今天的主题，浮动。
相信使用过浮动布局的同学对浮动是又爱又恨。爱它布局时带来的方便，恨它在布局时产生的“副作用”，怎样才能摆脱这些“副作用”，正确利用CSS浮动进行布局呢？我们还是得从浮动的基本使用开始谈起。
首先明确一个准则（非常重要，下面的例子都以它为基础）：浮动是一种定位模型，浮动的元素可以左右移动，直到它的外边缘碰到包含框活着另一个浮动框的边缘。浮动元素脱离文本流，因此，在文档的普通流中的元素就会表现得像浮动元素根本不存在一样。
这句话是什么意思呢？我们来看下面的例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>Document</
title
>
<
style
>
.box1{
background-color: red;
}
.box2{
background-color: blue;
}
.box3{
background-color: yellow;
}
.box{
width: 500px;
height: 200px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"box1 box"
></
div
>
<
div
class
=
"box2 box"
></
div
>
<
div
class
=
"box3 box"
></
div
>
</
body
>
</
html
>
|
现在有三个div元素，分别是box1，box2和box3.在没有浮动的情况下它们的显示效果如下图所示：
变形一：我们给box2添加左浮动，则会出现下面的效果：
咦？box3哪儿去了？消失了吗？显然没有（不信你可以在chrome下用F12打开开发者工具查看）！最终呈现效果是这样的原因有以下几点：
1.由于box2设置了左浮动，因此它会脱离文本流，直到它的外边缘碰到包含框或者另一个浮动元素的边缘，显然，这里只有box2一个元素是浮动的，因此，这里box2的外边缘碰到的是包含框，具体而言，这里的包含框就是body元素的左边缘。
2.由于box1是块级元素，因此它会占领整个height为200px的区域的所有宽度（即使它自身的宽度只有500px，但该高度内的其它区域仍被它占据），因此box2不能浮动到box1的右边，只能浮动到box1下面的左边缘。即是说，浮动元素的上一个元素如果是标准流中的元素，那么，浮动元素的顶部总是和上一个元素的底部对齐。
3.由于box2元素浮动，因此在普通文档流中它不占位置，因此，box3元素会向上移动，直到其顶部碰到box1元素的底部（即box3位于box1下面），但是由于box2元素是浮动的，它会浮动于普通文本流之上，因此，形成了box2遮挡box3的效果。
变形二：我们给box3也添加左浮动，效果如下：
现在，box3元素出现在box2元素的右边，原因还是最开始提到的那条准则。因为现在有box2，box3两个浮动元素。因此，box3元素的外边缘在碰到同为浮动元素box2的边缘时，停止左浮动。
变形三：现在我们改变三个框的宽度、高度，设置box1高300px，box2，box3高200px，三个box都左浮动，最终的效果如下：
这里有两个现象值得注意：
1.box3出现在box1和box2下面
2.box3被box1“卡住”
由于三个box均设置为左浮动，因此在理想情况下三个box应该是并列为一行显示，但是由于每个box宽度为500px，屏幕宽度为1368px，显然第三个box在第一列放不下，因此，box3出现在box1和box2下面。另一方面，由于浮动元素最终停靠在碰到另一个浮动元素边缘的位置，而这里box1的高度为300px，因此box3最终碰到的边缘是box1的边缘，因此最终呈现的效果是box3被“卡住”。
变形四：给这三个box加上一个父元素，mainbox（设置其margin-left：200px）。仍然设置仅有box2浮动，效果如下图所示：(注意和变形一对比)
变形四和变形一唯一的区别就是多了一个带margin-left的父元素mainbox，但呈现的效果是box2并没有浮动到页面的左边缘，而是出现在距左边缘200px的位置。原因还是上面的那条准则，浮动元素左移到它的外边缘碰到包含元素的边缘为止（这里没有其它的浮动元素，故不考虑碰到其它浮动元素边缘的情况），而这里的外边缘不再是body元素的边缘，而是mainbox的边缘，因此有了这样的效果。
明白了浮动元素浮动的原理，那么浮动元素还会给其它元素带来什么影响呢？我们明天继续！
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
