前端学习day006：浮动，清浮动，隐藏显示，外边距穿透，行元素之间的间距问题

1.浮动
    网页布局的一种形式 通过float 属性进行布局 left right
    浮动是元素左右布局的设置
    float属性没有继承关系   如果想要元素浮动 就给元素本身添加float
    块元素浮动后变为行内块元素
    行元素浮动之后变为行内块元素
对于浮动元素的父元素，可能会造成浮动后的一些问题 所以要清清除浮动带来的影响
    浮动的元素脱离文档流
    浮动的元素停靠在父元素旁边或者已经浮动元素的旁边
     如果左右空间元素不够，浮动的元素自动换行
  配合怪异盒子设置浮动效果更容易控制浮动布局
  box-sizing:border-box;
2.清浮动
    解决浮动带来的影响：子元素如果使用浮动后，父元素如果没有设置高度时，父元素高度为0；
 1.给父元素加高度；
 2.给浮动元素的末尾添加空元素 并设置清除浮动属性 clear:both;
 3.给父元素添加overflow:hidden;   :超出边界隐藏
 4.给浮动的父元素用伪元素方式：
class="clearfix"
.clearfix::after {
 /* div内容之前添加行元素 */
            content: "";
            display: block;
            clear: both;
        }
 5.使用双伪元素方式
clerafix::after,
        .clearfix::before {
            content: "";
            display: table;
        }
        
        .clearfix::after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }
 
伪元素和伪类 作用是一致的
after和before分别代表在元素之后和之前添加内容（行内块元素）
div::first-letter {
            /* 修改第一个字母的样式 */
        }
        
        div::first-line {
            /*第一行  */
        }
        
        div::after {
            /* 代表资源的路径 */
            content: url();
        }

标签的隐藏和显示：
display：none;//会让元素失去原有的空间
display:block;

占有原有空间：
 visibility：inherit；
 visibility：hidden；
 visibility：visible；
超出边界隐藏：
overflow：hidden；
 
font-size：0

外边距穿透
    兄弟元素 div1和div2外边距在垂直方向重叠 解决方式：
        1.只给其中一个设置总值
       2. 给下方元素设置绝对定位
       3.给下方元素转换为行内块元素
         4.给下方元素设置浮动
    父子元素 外边距在垂直方向重叠 
    给父元素添加overflow:hidden;
    给父元素加边框
    给父元素加内边距

行元素之间的间距问题
    ：行元素之间排列默认是有间距的 但不是外边距 是默认的特殊符号
 1.让行元素在一行排列，一旦格式化后标签会换行
2.外边距可以设置负数
父元素的文字大小设为0  font-size:0;有继承性用完还要给所有子元素单独                                                                                                                                                                                                                设置字体大小