CSS浮动-黑马程序员-web前端零基础

目录

1.结构伪类选择器

 2.伪元素（假标签）

3.浮动的特点

4.CSS属性顺序

 5.清除浮动

     5.1  清楚浮动的方法  ！！     

---

1.结构伪类选择器

用于查找某父级选择器中的子元素

E:nth-child(n）{}

匹配父元素中第n个元素，并且是E元素

 li:nth-child(7)
        {
            background-color: pink;
        }

公式：

偶数	2n  even
奇数	2n+1  2n-1   odd
找到前5个	-n+5
找到从第5个往后	n+5

li:nth-child(2n)
        {
            background-color: pink;
        }

 2.伪元素（假标签）

能够使用伪元素在网页中创建内容

伪元素添加的是一个行内元素

伪元素	作用
：：before	在父元素内容的最前添加一个伪元素
：：after	在父元素内容的最后添加一个伪元素

.father::before
    {
       content: "老鼠";
    }

3.浮动的特点

1. 浮动元素会脱离标准流，在标准流中不占位置（相当于从地面飘到空中）
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果

• 一行可以显示多个
• 可以设置宽高

浮动后的元素不能通过margin：0 auto和text-align：center居中

4.CSS属性顺序

浏览器执行效率更高

1. 浮动/display
2. 盒子模型：margin  border  padding 宽度高度背景色
3. 文字样式

 5.清除浮动

父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置

    5.1  清楚浮动的方法       

第1，2，3，4可以不用看，记住第5个就可以啦

1.  直接设置父元素高度
2. 额外标签法         

                在父元素内容的最后添加一个块级元素

                给添加的块级元素设置clear：both

        .clearfix
        {
            clear: both;
        }

    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>

     3.单伪元素清除法（工作中较常用）

         .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>

  4.双伪元素清除法

     .clearfix::before,
        .clearfix::after 
        {
            content: "";
            display: table;
        }
        .clearfix::after
        {
            clear: both;
        }


    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>

 5.overflow：hidden

直接给父元素设置overflow：hidden

这里是在top的css中加