7.包裹浮动元素

上一节提的父级包裹浮动元素的解决办法

    
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <p class="clear"></p>
    </div>

/* 让父级包裹三个浮动元素:让逻辑最后的那个元素清除浮动 */
.wrapper{
    border:1px solid #000;
}

.content{
    width:100px;
    height:100px;
    background-color: #000;
    float:left;
    color:#fff;
}

.clear{
    clear:both;
}

/* 但是html代表的是一个结构.我们要真正的解决一个bug或者解决一个问题,不可以在结构上随意修改 */
/* 所以以上解决办法不可以用 */

伪元素

    <!-- 伪元素 -->
    <span>
        很帅
    </span>
    <!-- 伪元素 -->

/* 伪元素 */
/* css权重 */
/* !important
行间样式
id
class|属性|伪类
标签|伪元素
通配符 */

/* 伪元素存在于任何一个标签里面,任意一个元素里面有两个特殊的伪元素:before after  */
/* 可以通过css把他们选择出来 */
/* 伪元素的元素结构是存在的,只不过他没有存在于html里面 */
/* 一个元素在诞生的时候,它逻辑的最前面和逻辑的最后面就已经有两个伪元素了 */
/* 把这个元素的最前面的那个伪元素选择出来 */
span::before{
    /* 针对于伪元素必须有的属性是content;填上值的话伪,元素就添加上你想要的值了 */
    content:"";
    /* 伪元素天生是行级元素,不可以用css改变宽高,由内容决定大小; */
    display:inline-block;
    width:100px;
    height:100px;
    background-color: red;

    /* 也可以设置定位,都可以 */
    position: absolute;
    top:100px;
    left:0px;
}
/* 把这个元素的最后面的那个伪元素选择出来 */
span::after{

}
/* 伪元素 */

伪元素解决清除浮动

    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>

/* 让父级包裹三个浮动元素:让逻辑最后的那个元素清除浮动 */
.wrapper{
    border:1px solid #000;
}

.content{
    width:100px;
    height:100px;
    background-color: #000;
    float:left;
    color:#fff;
}
/* 使用伪元素解决清除浮动的问题,逻辑的最后 */
.wrapper::after{
    content:"";
    /* clear这个属性有点特殊,如果要让他生效,必须是块级元素才可以;之前p就是块级元素 */
    clear:both;
    display:block;
}

除在逻辑的最后清浮动,让父级元素变成bfc也可以包裹浮动元素,因为bfc元素,文本类元素,文本,以及浮动元素都可以看到浮动元素;只有块级元素看不到浮动元素

使用触发bfc的父级元素包裹

但是现在是紧紧的包住了,没有原来的宽了;变成了由内容决定大小,不在独占一行了;
凡是设置了position:absolute;float:left/right的元素他会从系统内部,把元素转化为inline-block;宽高由内容决定

    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>

.wrapper{
    border:3px solid red;
    position:absolute;
}

.content{
    width:100px;
    height:100px;
    background-color: #000;
    float:left;
    color:#fff;
}

float应用场景

最早报纸类布局
当图片旁边是文字时,他不围在图片周围,图片和文字是底对齐的

 <!-- float应用场景 -->
    <!-- 最早报纸类布局 -->
    <!-- 当图片旁边是文字时,他不围在图片周围,图片和文字是底对齐的 -->
    <img src="test.png" alt="" width="200px">许凯，1995年3月5日出生于广东省 [1]  ，中国内地男演员、模特。
    2013年，获得中国（广州）国际模特大赛全国总决赛平面组冠军，以模特身份正式出道。2016年，签约成为欢娱影视旗下艺人 [2]  ；同年，出演个人首部电视剧《朝歌》，从而正式进入演艺圈 [3]  。2017年，主演电视剧《延禧攻略》，饰演富察傅恒 [4]  ；同年，主演古装仙侠剧《招摇》，饰演男主角厉尘澜 [5]  。2018年，出演电视剧《烈火军校》，饰演男主顾燕帧 [6]  。
    2019年，出演电视剧《大唐儿女行》 [7]  ；10月17日，许凯入选2019福布斯中国30岁以下精英榜 [8]  ；同年，主演古装剧《从前有座灵剑山》；同年，出演电视剧《天舞纪》，饰演擎天城小霸王李玄 [9]  。2020年5月，由许凯、程潇出演的电视剧《你微笑时很美》正式杀青；同年，主演电视剧《千古玦尘》 [10]  和《爱的二八定律》 [11]  ；10月15日，与吴谨言合作主演的古装剧《尚食》开机 [1]  [12-13]  。
    <!-- float应用场景 -->

要使文字环绕图片的话;加css浮动就可以

/* float应用场景 */
/* float浮动是css2.0提出的概念 */
/* 最早的浮动是做报纸类布局的 */
.test{
    float:left;
    margin-right:10px;
}
/* float应用场景 */

多张图片,有float:left也有float:right

<img class="test" src="test.png" alt="" height="80px">许凯，1995年3月5日出生于广东省 [1]  ，中国内地男演员、模特。
    2013年，获得中国（广州）国际模特大赛全国总决赛平面组冠军，以模特身份正式出道。2016年，签约成为欢娱影视旗下艺人 [2]  ；同年，出演个人首部电视剧《朝歌》，从而正式进入演艺圈 [3]  。2017年，主演电视剧《延禧攻略》，饰演富察傅恒 [4]  ；同年，主演古装仙侠剧《招摇》，饰演男主角厉尘澜 [5]  。2018年，出演电视剧《烈火军校》，饰演男主顾燕帧 [6]  。
    2019年，出演电视剧《大唐儿女行》 [7]  ；10月17日，许凯入选2019福布斯中国30岁以下精英榜 [8]  ；同年，主演古装剧《从前有座灵剑山》；同年，出演电视剧《天舞纪》，饰演擎天城小霸王李玄 [9]  。2020年5月，由许凯、程潇出演的电视剧《你微笑时很美》正式杀青；同年，主演电视剧《千古玦尘》 [10]  和《爱的二八定律》 [11]  ；10月15日，与吴谨言合作主演的古装剧《尚食》开机 [1]  [12-13]  。
    <img class="test1" src="test.png" alt="" height="80px">许凯，1995年3月5日出生于广东省 [1]  ，中国内地男演员、模特。
    2013年，获得中国（广州）国际模特大赛全国总决赛平面组冠军，以模特身份正式出道。2016年，签约成为欢娱影视旗下艺人 [2]  ；同年，出演个人首部电视剧《朝歌》，从而正式进入演艺圈 [3]  。2017年，主演电视剧《延禧攻略》，饰演富察傅恒 [4]  ；同年，主演古装仙侠剧《招摇》，饰演男主角厉尘澜 [5]  。2018年，出演电视剧《烈火军校》，饰演男主顾燕帧 [6]  。
    2019年，出演电视剧《大唐儿女行》 [7]  ；10月17日，许凯入选2019福布斯中国30岁以下精英榜 [8]  ；同年，主演古装剧《从前有座灵剑山》；同年，出演电视剧《天舞纪》，饰演擎天城小霸王李玄 [9]  。2020年5月，由许凯、程潇出演的电视剧《你微笑时很美》正式杀青；同年，主演电视剧《千古玦尘》 [10]  和《爱的二八定律》 [11]  ；10月15日，与吴谨言合作主演的古装剧《尚食》开机 [1]  [12-13]  。
    <img class="test" src="test.png" alt="" height="80px">许凯，1995年3月5日出生于广东省 [1]  ，中国内地男演员、模特。
    2013年，获得中国（广州）国际模特大赛全国总决赛平面组冠军，以模特身份正式出道。2016年，签约成为欢娱影视旗下艺人 [2]  ；同年，出演个人首部电视剧《朝歌》，从而正式进入演艺圈 [3]  。2017年，主演电视剧《延禧攻略》，饰演富察傅恒 [4]  ；同年，主演古装仙侠剧《招摇》，饰演男主角厉尘澜 [5]  。2018年，出演电视剧《烈火军校》，饰演男主顾燕帧 [6]  。
    2019年，出演电视剧《大唐儿女行》 [7]  ；10月17日，许凯入选2019福布斯中国30岁以下精英榜 [8]  ；同年，主演古装剧《从前有座灵剑山》；同年，出演电视剧《天舞纪》，饰演擎天城小霸王李玄 [9]  。2020年5月，由许凯、程潇出演的电视剧《你微笑时很美》正式杀青；同年，主演电视剧《千古玦尘》 [10]  和《爱的二八定律》 [11]  ；10月15日，与吴谨言合作主演的古装剧《尚食》开机 [1]  [12-13]  。
    
    <img class="test1" src="test.png" alt="" height="80px">许凯，1995年3月5日出生于广东省 [1]  ，中国内地男演员、模特。
    2013年，获得中国（广州）国际模特大赛全国总决赛平面组冠军，以模特身份正式出道。2016年，签约成为欢娱影视旗下艺人 [2]  ；同年，出演个人首部电视剧《朝歌》，从而正式进入演艺圈 [3]  。2017年，主演电视剧《延禧攻略》，饰演富察傅恒 [4]  ；同年，主演古装仙侠剧《招摇》，饰演男主角厉尘澜 [5]  。2018年，出演电视剧《烈火军校》，饰演男主顾燕帧 [6]  。
    2019年，出演电视剧《大唐儿女行》 [7]  ；10月17日，许凯入选2019福布斯中国30岁以下精英榜 [8]  ；同年，主演古装剧《从前有座灵剑山》；同年，出演电视剧《天舞纪》，饰演擎天城小霸王李玄 [9]  。2020年5月，由许凯、程潇出演的电视剧《你微笑时很美》正式杀青；同年，主演电视剧《千古玦尘》 [10]  和《爱的二八定律》 [11]  ；10月15日，与吴谨言合作主演的古装剧《尚食》开机 [1]  [12-13]  。
    <img class="test" src="test.png" alt="" height="80px">许凯，1995年3月5日出生于广东省 [1]  ，中国内地男演员、模特。
    2013年，获得中国（广州）国际模特大赛全国总决赛平面组冠军，以模特身份正式出道。2016年，签约成为欢娱影视旗下艺人 [2]  ；同年，出演个人首部电视剧《朝歌》，从而正式进入演艺圈 [3]  。2017年，主演电视剧《延禧攻略》，饰演富察傅恒 [4]  ；同年，主演古装仙侠剧《招摇》，饰演男主角厉尘澜 [5]  。2018年，出演电视剧《烈火军校》，饰演男主顾燕帧 [6]  。
    2019年，出演电视剧《大唐儿女行》 [7]  ；10月17日，许凯入选2019福布斯中国30岁以下精英榜 [8]  ；同年，主演古装剧《从前有座灵剑山》；同年，出演电视剧《天舞纪》，饰演擎天城小霸王李玄 [9]  。2020年5月，由许凯、程潇出演的电视剧《你微笑时很美》正式杀青；同年，主演电视剧《千古玦尘》 [10]  和《爱的二八定律》 [11]  ；10月15日，与吴谨言合作主演的古装剧《尚食》开机 [1]  [12-13]  。
    <img class="test1" src="test.png" alt="" height="80px">许凯，1995年3月5日出生于广东省 [1]  ，中国内地男演员、模特。
    2013年，获得中国（广州）国际模特大赛全国总决赛平面组冠军，以模特身份正式出道。2016年，签约成为欢娱影视旗下艺人 [2]  ；同年，出演个人首部电视剧《朝歌》，从而正式进入演艺圈 [3]  。2017年，主演电视剧《延禧攻略》，饰演富察傅恒 [4]  ；同年，主演古装仙侠剧《招摇》，饰演男主角厉尘澜 [5]  。2018年，出演电视剧《烈火军校》，饰演男主顾燕帧 [6]  。
    2019年，出演电视剧《大唐儿女行》 [7]  ；10月17日，许凯入选2019福布斯中国30岁以下精英榜 [8]  ；同年，主演古装剧《从前有座灵剑山》；同年，出演电视剧《天舞纪》，饰演擎天城小霸王李玄 [9]  。2020年5月，由许凯、程潇出演的电视剧《你微笑时很美》正式杀青；同年，主演电视剧《千古玦尘》 [10]  和《爱的二八定律》 [11]  ；10月15日，与吴谨言合作主演的古装剧《尚食》开机 [1]  [12-13]  。
    <img class="test" src="test.png" alt="" height="80px">许凯，1995年3月5日出生于广东省 [1]  ，中国内地男演员、模特。
    2013年，获得中国（广州）国际模特大赛全国总决赛平面组冠军，以模特身份正式出道。2016年，签约成为欢娱影视旗下艺人 [2]  ；同年，出演个人首部电视剧《朝歌》，从而正式进入演艺圈 [3]  。2017年，主演电视剧《延禧攻略》，饰演富察傅恒 [4]  ；同年，主演古装仙侠剧《招摇》，饰演男主角厉尘澜 [5]  。2018年，出演电视剧《烈火军校》，饰演男主顾燕帧 [6]  。
    2019年，出演电视剧《大唐儿女行》 [7]  ；10月17日，许凯入选2019福布斯中国30岁以下精英榜 [8]  ；同年，主演古装剧《从前有座灵剑山》；同年，出演电视剧《天舞纪》，饰演擎天城小霸王李玄 [9]  。2020年5月，由许凯、程潇出演的电视剧《你微笑时很美》正式杀青；同年，主演电视剧《千古玦尘》 [10]  和《爱的二八定律》 [11]  ；10月15日，与吴谨言合作主演的古装剧《尚食》开机 [1]  [12-13]  。

.test{
    margin-right:10px;
    float:left
}
.test1{
    margin-left:10px;
    float:right;
}

导航栏

    <!-- 导航栏 -->
    <ul class="nav">
        <li class="list-item">
            <a href="">天猫</a>
        </li>
        <li class="list-item">
            <a href="">聚划算</a>
        </li>
        <li class="list-item">
            <a href="">天猫超市</a>
        </li>
    </ul>
    <!-- 导航栏 -->

/* 导航栏 */
.nav{
    /* ul标签的前面的大圆点去掉 */
    list-style:none;
}
a{
    /* 去除a的下划线 */
    text-decoration: none;
}
.list-item{
    /* 横过来 */
    float:left;

    /* 字体垂直居中 */
    height:30px;
    line-height:30px;

    /* border:1px solid; */
    /* 让他们间隔距离 */
    margin-right:15px;
}
.list-item a{
    /* 字体颜色 */
    color:#f40;
    font-weight:bold;

    /* 让a高度等于li的高度 */
    height:30px;
    /* 但是a是行级元素，不可以通过css改变宽高 */
    display:inline-block;

    /* 让a两边有距离，内边距 */
    padding:0 10px;


}
.list-item a:hover{
    background-color:#f40;
    color:#fff;
    border-radius:20px;
}

/* 之前解决父级元素包裹浮动元素，清楚了浮动流，这里就算不用包裹，他的浮动流也会对后续元素产生影响， */
/* 所以一般我们用完浮动，都会把它清除掉 */
.nav::after{
    content:"";
    display:inline-block;
    clear:both;
}
/* 导航栏 */