学海无涯，不要沉浸在知识的海洋里，迷失自己。

　　要知道自己想要什么，抓住重点，不忘初心。

　　这个世界上百分之20的人，掌握着百分之80的财富。

　　接下来一系列教程，就带领大家抓住重点，一起做那百分之20的人。

　　往期知识点回顾：

　　重点属性-display

　　重点属性-position

　　重点属性-flex

　　重点属性-background

　　重点属性-media

　　重点属性-overflow

　　一、重点属性float

　　float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

　　left 元素向左浮动。

　　right 元素向右浮动。

　　none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

　　inherit 规定应该从父元素继承 float 属性的值。

　　知识重点：

　　元素同时设置了浮动和绝对定位，则浮动是没有效果

　　定位了的元素永远能压住没有定位的元素，即上面的解释：绝对定位能压住浮动的元素

　　面试题：

　　1. 清除浮动方法？

　　答案1：给父级p定义伪类：after和zoom

　　/*清除浮动代码*/ .clearfloat:after{display:block; clear:both;content:""; visibility:hidden; height:0} .clearfloat{zoom:1}复制代码然后父级元素添加clearfloat类名即可

　　答案2：给父级元素定义 overflow:hidden（推荐使用，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏）

　　代码实践：

　　带标题的图像浮动于右侧

　　p{ float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center;}复制代码使段落的首字母浮动于左侧

　　span{ float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%;}复制代码将带有边框和边界的图像浮动于段落的右侧

　　img { float:right; border:1px dotted black; margin:0px 0px 15px 20px;}