《----css样式---------浮动带来的影响与解决方法---------------》

浮动就是让我们的元素脱离标准文档流，目的是为了布局好看！

浮动的现象：

1. 脱离标准文档流被叫做脱流，同时会出现字围现象。

2. 浮动的元素会相互贴靠，而且如果父容器空间足够大，则浮动的元素会正常紧靠也就是后一个元素会紧靠前一个元素。如果父容器空间不够大，那么元素会找上级的上级去紧靠，如果还找不到则继续找上级紧靠，没有了上级可靠那就靠边。

3. 浮动的元素不分块级和行内类别，也就是说都可以设置宽高可边距。
4. 浮动以后，同一行内的元素以顶边作为基线对齐。

为什么浮动会带来影响？？？？？？
因为浮动元素不占父标签的高度内容，会导致父标签高度的减少，以及标准文档流光标的上移

解决的核心入手点？
（1）固定父标签高度 （2）固定光标位置

清楚的方法
（1）父标签设置高度
        好处：两个核心点都解决了
       坏处：一。我们以后很少给div固定死高度 二。不容易计算高度

（2）内墙法 clearboth
         是加到不想上移的标签身上
        坏处：不会增加因浮动导致缩小高度的标签增加高度

（3）overflow

     主业：超出隐藏部分
    副业：帮助本标签清除浮动带来的影响

（4）第四种：使用伪元素的方式，：after、：before

3.             使用方法：
               .clearfix：after{
                                 content:"", 这是伪元素添加的内容
                                  display:block,
                                  clear:both, 清除浮动
                                  height：0，
                                  visibility:hidden 不显示出来
                                }
               .clearfix{
                  *zoom:1;为了兼容IE6、7
               }
               使用方法：
               .clearfix:before, .clearfix:after {
                   content: "";
                   display: table;
               }
               .clearfix:after {
                   clear: both;
               }
               .clearfix {
                   *zoom: 1; /*IE/7/6*/
               }
       区别伪类与伪元素：
           伪类：:link :visited  :hover :active  love hate 注意：我们在使用时一定要遵守lvha原则
                   :focus :first-child :last-child等等
           伪元素：:after  :before  :first-line :first-letter
           伪类：用于给某一个元素修改css属性，可以看成是给该元素添加了一个类选择器样式
           伪元素：用于给某个元素添加内容及css属性样式，可以看成是在该元素内又加了一个元素