寒假来了, 打算重新学习总结前端的知识要点以及前端领域出现的新东西，因此有了这个系列。更多内容可以去我的github:
1. 浮动
1.1 什么是浮动
Float是一个CSS定位属性, 要了解他的目的和起源, 我们可以看看印刷设计, 在打印布局中, 可以将图像设置到页面中, 使得文本根据需要环绕他们。
而在页面中浮动是这样工作的: 浮动元素会脱离正常的文档布局流,并吸附在其父容器的左边/右边(float: left/right)。在正常布局下中位于该浮动元素之下的内容,此时会围绕着浮动元素。填满左侧或右侧的空间。
浮动元素仍然是网页流的一部分,这与使用绝对定位的页面不同, 绝对定位的页面元素将从网页的布局流中移除。
1.2 浮动使用场景
除了图像环绕文字之外,浮动可用于创建整个网页布局
在较小的布局中,浮动对布局也很有帮助, 如果我们使用float应用到我们的图像上,那么当图像改变大小时, 框中的文本将回流适应
同样的布局也可以通过容器上的相对定位和绝对定位来完成,这样做的话, 文本将不会受到化身的影响,并且不能在大小改变时重新排版
1.3 清除浮动
Float的相对属性是Clear, 一个拥有clear属性的元素, 并不向像浮动元素的方向移动,而是会在浮动元素的下方
在上面的例子中, slidebar像右浮动,比Main Content内容区域短,然后footer被移动到浮动所需的可用空间。要解决这个问题,我们可以给footer元素设置清除浮动时
#footer { clear: both;} 
clear也有四个有效值, both是最常用的,清楚来自任意方向的浮动, left和right可以用来分别从一个方向清除浮动。
1.4 浮动问题
如果父元素只包含浮动的元素,那么他的高度就会塌陷。如果父元素不包含任何视觉明显的背景,并不会有什么问题。但是更难的是这种情况
float before
float after
这样输写代码会造成这样的情况
这样使用浮动会在文本流中出现不自然的间隔中断。而且没有实际的方法来修复他
1.5 清除浮动的技巧
- 空div法: 在父元素中添加一个
div,也可以是<br>元素获取其他元素。
- overflow: 在父元素上设置
overflow属性，如果此属性设置为auto或者hidden则可以达到清除浮动的效果。但要注意overflow并不是专门用于清除浮动。 - 伪元素法: 使用伪元素来清除浮动，也是目前常用的方法
.clearfix{ zoom: 1; display: block;}.clearfix:after{ content: ""; visibility: hidden; display: block; height: 0; clear: both;} 阅读原文: