CSS 回忆篇 | 布局常用 | 浮动float | 定位position

---

浮动

float时CSS3样式表中的浮动属性，用于设置标记元素的浮动布局，通过设置其浮动属性，改变元素的排列方式：

float: left|right|none

• left：元素浮动在左侧
• right：元素浮动在右侧
• none：元素不浮动

例子：比较各种浮动方式的区别

要使用float属性实现不同表情包的浮动效果。

效果：

首先在html文件中添加表情包图片以及提示文字：

<div class="cont">
    <p>当前表情包的浮动属性为none，当鼠标滑过本行文字时，浮动状态为left，单击文字浮动状态为right</p>
    <div><img src="img/cry.png" alt=""></div>
    <div><img src="img/amazed.png" alt=""></div>
    <div><img src="img/awkward.png" alt=""></div>
    <div><img src="img/laugh.png" alt=""></div>
</div>

然后编写css代码：

        .cont{
            background: rgb(255,255,255);
            width: 800px;
            height: 520px;
            margin: 0 auto;
            border-color: red;
            border: 1px double;
        }
        p{
            background: #ff0;
            font-size: 20px;
            line-height: 30px;
        }
        img{
            height: 100px;
            width: 100px;
        }
        .cont:hover.cont div{
            float: left;
        }
        .cont:active.cont div{
            float: right;
        }

完成

定位

通过定位position属性可以使标记出现在定义的位置上，语法格式如下：

position:static|absolute|fixed|relative;

• static：无特殊定位
• absolute：绝对定位，使用top、right、bottom和left等属性指定绝对位置，使用该属性可以可以让元素漂浮于页面之上
• fixed：绝对定位，且元素位置固定，不随滚动条移动而改变位置
• relative：相对定位，由top、right、bottom和left等属性指定位置