寒假要到了，打算重新学习总结一下前端知识重点和前端领域的新事物，所以才有了这个系列。更多内容可以到我的github：https://github.com/SGAMERyu1。Float1.1什么是FloatFloat是一个CSS定位属性，要了解它的用途和来源，我们可以看看印刷设计，在印刷布局中，可以将图片设置到页面中，让文字随意环绕。;而浮动在页面中的作用是这样的：浮动元素会脱离正常的文档布局流程，吸附到其父容器的左/右（float:left/right）。正常布局中浮动元素下的内容此时会包围浮动元素。填充左侧或右侧的空间。浮动元素仍然是页面流的一部分，这与使用绝对定位的页面不同，后者将它们从页面的布局流中移除。1.2浮动的使用场景除了图片环绕文字外，浮动还可以用来打造整个网页的布局在较小的布局中，浮动对于布局的帮助也很大。如果我们使用float应用于我们的图像，那么当图像改变大小时，框中的文本将重新排列以适应相同的布局也可以在容器上使用相对和绝对定位来完成，这样做时，文本不会受头像影响，大小变化时不能重新排版1.3ClearFloat的相关属性是Clear，具有clear属性的元素不会向浮动元素的方向移动，而是会在浮动元素的下方。在上面的例子中，滑动条向右浮动，比MainContent内容区域短，然后将页脚移动到浮动所需的可用空间。为了解决这个问题，我们可以设置footer元素清除浮动#footer{clear:both;}clear也有四个有效值，both是最常用的，清除任意方向的浮动，left和right都可以用来从Clearfloat向一个方向移动。1.4浮动问题如果父元素只包含浮动元素，那么它的高度就会塌陷。父元素是否不包含任何视觉上重要的背景并不重要。但是比较难的是这种情况
floatbefore floatafter 这种输入写代码会造成这样的情况，所以使用的浮动会在文本流中出现不自然的间隔断点。而且没有真正的办法解决他1.5Clearfloatingtrick清空div方法：在父元素中添加一个div，同时
元素获取其他元素。