CSS清除浮动的方法与CSS精灵图

清除浮动的方法
        1.给浮动元素的父级盒子设置一个固定的高度
          优缺点：不够灵活，适用于高度固定的布局中

        2.为浮动元素的父级盒子设置浮动
          优缺点：会产生新的浮动问题

        3.为浮动元素的父盒子添加overflow属性；overflow的属性值可以为hidden,scroll,auto
          优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁

        4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both;
          优缺点：代码冗余，通俗易懂，书写方便

            clear: left; 清除左侧浮动带来的影响
            clear: right;清除右侧浮动带来的影响
            clear: both;清除两侧浮动带来的影响

        5.推荐方式：用伪元素清除浮动，给浮动元素的父级盒加类名.clearfix，并在.clearfix中添加样式：
       
           .clearfix::after{
                 content:'';
                 display:block;
                 clear:both;
            }
            优缺点：不会再结构上产生冗余代码，可以重复使用，结构语义化正确

1）什么是伪元素

用css语言创造出来的标签

伪元素创造的标签是行级标签

2）如何创建伪元素

• element::before{ content:"伪元素的文本内容"; 属性名: 属性值; } element元素内部，内容之前，添加“伪元素的文本内容”

• element::after{ content:"伪元素的文本内容"; 属性名: 属性值; } element元素内部，内容之后，添加“伪元素

• 二、CSS 精灵（雪碧图、精灵图）

• 学习目标

• 能够说出什么是CSS精灵

• 掌握CSS精灵在实际示案例中的应用

概述

css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就 是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置

精灵图的原理

• 将页面中的背景图合并成一张图片

• 利用背景属性，使不同元素显示图片的不同部分

实现步骤：

1.测量图片大小

2.通过引入背景图片，用背景定位实现

2、css sprites的优缺点

• 优点：

1.减少网页的http请求，提高页面的性能

2.减少在图片上的命名困扰

3.更换网页风格方便

• 缺点：

1.必须要限定容器的大小

2.背景图位置需要计算

3、适用场景

适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。

三、滑动门

概述：

css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容

实现要点

滑动门核心技术就是利用背景属性（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

滑动门实现：
        a  span
            a用来撑开左边的小括号
            span用来撑开右边的小括号
            给a设置padding-left: 让文字距离左边有点距离，美观
            给span设置padding-right 让文字距离右边有点距离，美观

            实际文字写在span里面，span的宽度由文字和内边距撑开
            a的宽度是由span撑开了