这是我参与「第四届青训营」笔记创作活动的的第3天

CSS深入

1.浮动

通过设置元素浮动效果，可以使元素向左侧或右侧移动。

float:none设置默认值
float:left向左浮动
float:right向右浮动

在设置浮动布局之后，水平布局不需要强制成立，并且元素会从文档流中完全脱离，不会占用文档位置，所以元素下边区域还在文档流中的元素会自动向上移动，但浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，浮动元素不会超过它前面其他的浮动元素。

2.浮动的特点

浮动脱离文档流后，会改变元素的特点，即：

块元素

块元素不再独占一行
脱离文档流，元素的宽度和高度都被内容撑开

行内元素

行内元素脱离文档流后，特点和块元素一样（脱离文档流后，不必区分块和行内元素）

box-sizing:border-sizing可设置可见框的大小，content-sizing 可设置外边距。

3.浮动的问题

3.1 高度塌陷

父元素的高度被子元素撑开，当子元素浮动后，从文档流中脱离，无法撑起父元素的高度，在父元素高度丢失后，会导致其下元素上移，使页面布局混乱

3.2 解决方法

通过开启BFC模式（Block Formatting Content）块级格式化环境，是CSS一个隐含属性，当元素开启BFC会变成一个独立的布局区域。

开启后特点：

1.开启BFC元素不会被浮动元素覆盖

2.开启BFC元素子元素和父元素外边距不会重叠

3.开启BFC的元素可以包含浮动的子元素

可以通过特殊方式打开BFC（有副作用）：

1.设置元素浮动（不推荐）

2.将元素设置为行内块元素（不推荐）

3.将元素的overfloat设置为一个非visible值

overfloat: scroll;

overfloat: auto;

overfloat: hidden; //-常用方式

通过clear，可以消除浮动元素对当前元素的影响。clear: left;左侧浮动元素 && clear: right;右侧浮动元素 || clear: both;清除两侧中最大那个。。在清除后，浏览器会自动为元素添加一个上外边距，以使其不受影响。

故而完美方案，为元素添加属性，加上（clearfix类或ID）

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

3.案例

以下以京东页面进行举例：

$~PFA6}1@5_~0TFY%2}${6}2.png$

构建京东页面中的顶部部分，其中分为左侧地点选择“厦门”在触发后会显示下拉框，这一步部分可以通过设置diaplay：none；进行隐藏后通过，设置：hover伪类触发display：block；进行显示，右侧导航栏top-bar，以及左侧的厦门location，都是通过设置浮动float进行定位，并且通过上述的clearfix方式开启外围容器的BFC模式，对浮动产生的影响进行消除。

以下是CSS代码部分：

<style>
            .clearfix::before,
            .clearfix::after{
                clear: both;
                content: '';
                display: table;
            }

        body{
            font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
        }
        .top-bar-wrapper{
            width: 100%;
            height: 30px;
            line-height: 30px;
            background-color: #e3e4e5;
            border-bottom: 1px #ddd solid;

        }
        .top-bar{
            width: 1190px;
            margin: 0 auto;
            position: relative;
        }
        .top-bar span,
        .top-bar a,
        .top-bar i{
            color: #999;
            text-decoration: none;
        }
        .top-bar a.highlight,
        .top-bar a:hover{
            color:#f10215
        }
        .location{
        float: left;    
        }
        .shortcut{
            float: right;
        }
        .shortcut .line{
            width: 1px;
            height: 10px;
            background:#999;
            margin: 10px 12px;
        }

        .shortcut li{
            float: left;
        }
     .top-bar .city-list{
        width: 300px;
        height: 422px;
        position: absolute;
        /* background-color: #f10215; */
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        display: none;
        border: 1px solid rgb(204, 204, 204);
        top: 31px;
        z-index: 999;
     }
     .location:hover .city-list{
        display: block;
     }
     .current-city{
    padding: 0px 10px;
    padding-bottom: 1px;
     }
     .location:hover .current-city{
        background-color: white;
        border: 1px solid rgb(204, 204, 204);
        border-bottom: none;
        position: relative;
        z-index: 9999;
     }
        
    </style>

以下是body部分：

<body>
    <!-- 创建外围的容器 -->
    <div class="top-bar-wrapper clearfix">
    <!-- 创建内部容器 -->
    <div class="top-bar">
        <div class="location">
            <!-- 左侧菜单栏 -->
            <div class="current-city">
                <i class="fas" style="color: #f10215; font-size: 14px;">&#xf3c5</i>
                <a href="javascript:;">厦门</a>
          
            </div>
            <div class="city-list"></div>
        </div>
        <!-- 右侧菜单栏 -->
        <ul class="shortcut">
            <li>
                <a href="javascript:;">您好，请先登入</a>
                <a class='highlight' href="javascript:;">免费注册</a>
            </li>
            <li class="line"></li>
            <li>
                <a href="javascript:;">我的订单</a>

            </li>
            <li class="line"></li>
            <li>
                <a href="javascript:;">我的京东</a>
                <i class="fas fa-chevron-down" ></i>
            </li>
            <li class="line"></li>
            <li>
                <a class="highlight" href="javascript:;">京东会员</a>


            </li>
            <li class="line"></li>
            <li>
                <a href="javascript:;">企业采购</a>
                <i class="fas fa-chevron-down"></i>

            </li>
            <li class="line"></li>
            <li>
                <span>客户服务</span>
                <i class="fas fa-chevron-down"></i>
            </li>
            <li class="line"></li>
            <li>
                <span>网站导航</span>
                <i class="fas fa-chevron-down"></i>
            </li>
            <li class="line"></li>
            <li>
                <span>手机京东</span>
            </li>
        </ul>
    </div>
</body>

前端开发 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天