CSS必知|重点属性float|实践技巧|温故知新

学海无涯，不要沉浸在知识的海洋里，迷失本身。面试

要知道本身想要什么，抓住重点，不忘初心。markdown

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

接下来一系列教程，就带领你们抓住重点，一块儿作那百分之20的人。spa

往期知识点回顾：code

重点属性-displayorm

重点属性-position继承

1、重点属性float

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

left 元素向左浮动。

right 元素向右浮动。

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

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

知识重点：

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

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

面试题：

1. 清除浮动方法？

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

/*清除浮动代码*/     
  .clearfloat:after{display:block;
                    clear:both;content:"";
                    visibility:hidden;
                    height:0}         
  .clearfloat{zoom:1}
复制代码

而后父级元素添加clearfloat类名便可

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

代码实践：

带标题的图像浮动于右侧

div{
   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;
}
复制代码