看得越多理解越深之浮动

先解决一个问题，再写一点点帮助理解position和float的东西。

1.之前一篇文章（关于css浮动）末尾提到过子元素浮动时，为了能撑开父元素（闭合、清除浮动），将父元素也设为浮动。今天翻了一会阿当的《编写高质量代码：Web前端开发修炼之道》，这本书给出了更好的方法。书中是这么描述和解决这个问题的：

通常情况下，为了让浮动元素的父元素能够根据浮动元素的高度而自适应高度，有三种做法：

• 让父元素同时浮动起来。

• 让父元素后面紧跟一个用于清除浮动的空标签。

• 给父元素挂一个特殊的class，直接从父容器清除元素的浮动。

第一种方法会让父容器也浮动起来，影响父元素后面的元素的布局；第二种方法增加了一个空标签，破坏了语义化；第三种方法没有任何副作用，推荐使用。

下面主要分析一下第三种方法也是最合适的方法。给出示例代码：

html:

<div class = "clearfix">
    <div class = "fLeft"></div>
</div>

css：

.fLeft {
    width: 50px; height: 30px;
    float: left;
}
.clearfix {
    width:100px; height: auto;
}

（为了方便查看可以为div设置边框或背景色）这时在网页中父元素其实是没有高度的，这是因为float脱离了文档流（但还占据空间），父元素中其实是没有元素来撑开父容器的。所以我们需要增加这样一段：

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

这里after添加的元素位于 .fLeft 之后。如果仅仅是达到撑开父容器的目的，个人觉得这段可以更精简些。

2.还是阿当的那本书。关于relative，absolute和float。

• relative：不脱离文档流，处于z-index = 0中。

        float：脱离文档流，处于z-index = 0中。

        absolute：脱离文档流，不在z-index = 0中。absolute很难控制，尽量不要使用。

• absolute和float会使display = inline-block（这时显式设置display为其他属性也没用）。这意味着它们不能设置宽高和竖直方向的内外边距，也不会占据一行的空间。