css 浮动

浮动

伪类对象：

/*伪类对象：伪类对象会在页面中作为一个伪元素，展示出来*/
/* h1::before：在内容最前面显示*/
<style>
    h1::before{
        content:"哈哈";
        color:red;
    }
    /* h1::before：在内容最后面显示*/
    h1::after{
        content:"呵呵";
        color:red;
    }
    /*
    总结
        1）：伪类对象里边必须要有一个content属性，但是可以空着     
        2):伪类对象默认为行内元素，但是可以通过display进行转换
    */
</style>
​
<h1>
佐助
</h1>

float

1. 如果想让两个块级元素在一行，可以添加浮动

总结：

1. 浮动元素从右往左运动，碰到父级元素边界或者其他浮动元素时就停下

2. 浮动可以把一个元素变成行内块元素

3. 浮动会起来，脱离文档流；（注意：文字会挡在外面）

4. 子元素的浮动会引起父元素高度撑不开

解决浮动的问题：

​
<style>
    .3{
        clear:right;/*清除右浮动*/
        clear:left;/*清除左浮动的影响*/
        clear:both;/*清除左/右浮动的影响*/
       /*清除浮动主要是要解决子元素浮动引起父元素高度撑不开的问题
        ps:用了浮动的地方，就要清除浮动，不然就很有可能导致页面的结构出现混乱
        */       
    }
</style>

清除浮动第二种方法：

<style>
    /*通过after伪类对象来清除浮动*/
    div::after{
        content:"";
        clear:both;
        display:block;
    }
</style>