HTML和CSS中的浮动以及边框塌陷解决方案（内置练习及答案）

一、浮动概述

在HTML和CSS中，“浮动”（Float）是一种布局技术，它允许元素脱离其正常的文档流，向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。浮动元素仍然保持块级盒模型的特性（如可以设置宽度和高度），但是它们不再占据文档流中的空间，这意呀着文档中的其他元素会围绕浮动元素布局，就像浮动元素不在那里一样。

1.标准文档流

标准文档流：指元素根据块元素或者行内元素的特性按照从上到下，从左到右的方式自然排列，这也是元素默认的排列方式

标准文档流组成

块级元素（block）
- 占据一整行
- <h1>...<h6>、<p>、列表、div
内联元素（行内元素 inline）
- 就占自己那一块
- <span>、<a>、<img/>、<strong>....

内联标签可以包含在块级标签中（块级元素包含内联元素），成为它的子元素，而反过来则不成立

2.display

块级元素与行元素的转变（block、inline）
控制块元素排到一行（inline-block）
控制元素的显示与隐藏（none）

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符的
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01display用法</title>
    <style>
        /* 内联元素的宽高等于内容的宽和高，无法通过width和heigth进行设置 */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 块级元素会有一个display的默认值block 
            display: block;*/
            /* 将块级元素变为行内元素 */
            display: inline;
        }

        span{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            /* 将内联元素设置块级元素
            display: block; */

            /* 行内块元素 */
            display: inline-block;
        }
        p{
            border: 1px solid red;
        }
        p .img{
            display: none;
        }
        p:hover .img{
            display: block;
        }
        
    </style>
</head>
<body>
    <div>我是div块元素</div>
    <span>我是span行内元素</span>

    <p>你好
        <img class="img" src="image/photo-1.jpg" alt="">
    </p>
    
    
    
</body>
</html>

3.练习

在这里插入图片描述

需求：

导航背景颜色为黑色半透明 rgba(0,0,0,0.5)。div:高度90px，宽度1180px，margin：0px auto
鼠标移入“功能特权”等导航信息时文字颜色变为蓝色，无下划线
“登录”部分信息使用超链接实现，添加圆角边框，鼠标移入字体颜色加深,添加背景颜色为黄色

*{
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}

.nav-header{
    height: 90px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.head-contain {
    width: 1180px;
    height: 90px;
    margin: 0px auto;
    text-align: center;
    margin-left: 90px;
}
.top-logo {
    vertical-align: middle;
}
.top-nav {
    margin: 0 48px;
}
.top-nav,.top-nav ul,.top-nav ul li,.head-contain,.top-right{
    display: inline-block;
}
.top-nav li {
    line-height: 90px;
    width: 90px;
}
.top-nav li a{
    display: block;
    text-align: center;
    font-size: 16px;
    color: #fff ;
}
.top-nav li a:hover{
    color: blue;
}
.top-right a{
    display: inline-block;
    font-size: 16px;
    text-align: center;
    margin-top: 25px;
    border-radius: 35px;
}

.top-right a:first-of-type{
    width: 93px;
    height: 38px;
    line-height: 38px;
    color: #fad65c;
    border: 1px #fad65c solid;
}
.top-right a:first-of-type:hover{
    color: #986b0d;
    background: #fad65c;
}
.top-right a:last-of-type{
    width: 140px;
    height: 40px;
    font-weight: bold;
    line-height: 40px;
    background: #fad65c;
    color: #986b0d;
}
.top-right a:last-of-type:hover{
    background: #fddc6c;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02qq会员</title>
    <link rel="stylesheet" href="css/qq.css">
</head>
<body>
    <!-- 头部 -->
    <header class="nav-header">
        <!-- 图片和列表 -->
        <div class="head-contain">
            <img src="image/logo.png" width="145" height="90" class="top-logo"></img>
            <nav class="top-nav">
                <ul>
                    <li><a href="#">功能特权</a></li>
                    <li><a href="#">游戏特权</a></li>
                    <li><a href="#">生活特权</a></li>
                    <li><a href="#">会员活动</a></li>
                    <li><a href="#">成长体系</a></li>
                    <li><a href="#">年费专区</a></li>
                    <li><a href="#">超级会员</a></li>
                </ul>
            </nav>
             <!-- 按钮 -->
            <div class="top-right">
                <a href="#">登录</a>
                <a href="#">开通超级会员</a>
            </div>
        </div>
       
    </header>
</body>
</html>

4.块级元素排在一行的方法

inline-block
float

4.1 左浮动

float:left;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03float-左浮动</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px #000 solid;
        }
        .layer1{
            border: 1px #F00,dashed;
            float: left;  /*向左边浮动*/
        }
        .layer2{
            border: 1px #00F,dashed;
            float: left;  /*向左边浮动*/
        }
        .layer3{
            border: 1px #060,dashed;
            float: left;  /*向左边浮动*/
        }
        .layer4{
            border: 1px #666,dashed;
            font-size: 12px;
            line-height: 23px;
            float: left;  /*向左边浮动*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="layer1"><img src="image2/photo-1.jpg" alt=""></div>
        <div class="layer2"><img src="image2/photo-2.jpg" alt=""></div>
        <div class="layer3"><img src="image2/photo-3.jpg" alt=""></div>
        <div class="layer4">
            浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
        </div>
    </div>
</body>
</html>

4.2 右浮动

float:right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px #000 solid;
        }
        .layer1{
            border: 1px #F00,dashed;
            float: right;  /*右浮动*/
        }
        .layer2{
            border: 1px #00F,dashed;
            float: right;  /*右浮动*/
        }
        .layer3{
            border: 1px #060,dashed;
            float: right;  /*右浮动*/
        }
        .layer4{
            border: 1px #666,dashed;
            font-size: 12px;
            line-height: 23px;
            float: right;  /*右浮动*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="layer1"><img src="image2/photo-1.jpg" alt=""></div>
        <div class="layer2"><img src="image2/photo-2.jpg" alt=""></div>
        <div class="layer3"><img src="image2/photo-3.jpg" alt=""></div>
        <div class="layer4">
            浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
        </div>
    </div>
</body>
</html>

5.浮动练习

浮动练习一

在这里插入图片描述

热门活动div宽度700px，再浏览器居中显示
“更多”使用右浮动让它排列到右边
“热门活动”字体大小20px，加粗，字体颜色为黑色 “更多”字体大小18px，颜色为#5b666b
其它文字大小12px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06热门活动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 700px;
            margin: 10px auto;
        }
        ul li{
            list-style: none;
        }
        .box h2{
            font-size: 20px;
            float: left;
        }
        .box h1{
            font-size: 18px;
            color: #5b666b;
            float: right;

        }
        
        .box ul li {
            float: left;
            margin: 10px 20px;
        }
        .box ul li p{
            font-size: 12px;
        }
        .clean {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>
            热门活动
        </h2>
        <h1>
            更多
        </h1>
        <div class="clean"></div>
        <ul>
            <li>
                <img src="image/img1.png" alt="">
                <p>推荐活动 | 原创音乐现金榜T榜</p>
            </li>
            <li>
                <img src="image/img2.png" alt="">
                <p>推荐节目|《TAImusic》爆笑来袭</p>
            </li>
            <li>
                <img src="image/img3.png" alt="">
                <p>推荐歌单 | 继续宠爱张国荣</p>
            </li>
            <li>
                <img src="image/img4.png" alt="">
                <p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p>
            </li>
        </ul>
    </div>
</body>
</html>

浮动练习二

在这里插入图片描述

整个div：328px margin：10px auto
标题前面的图标使用背景图片，标题字体大小12px，行高27px，距离左边的距离38px
中间部分使用浮动让图片和右边的文字描述排在一行
下面的列表项中的文字使用左浮动，作者描述使用右浮动
所有的超链接都没有下划线，输入移入有下划线

*{
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
a{
    color: #666;
    text-decoration: none;
}
/* 盒子 */
#main{
    width: 328px;
    margin: 10px auto;
}
/* 标题 */
#title h2{
    border: 1px solid #e0e0e8;
    font-size: 12px;
    height: 27px;
    line-height: 27px;
    padding-left: 38px;
    background: url(../image/1.gif) no-repeat 11px 7px;
}
/* 图片和简介部分 */
#top {
    margin: 14px 0px 0 0;
}
#top #text{
    float: right;
    width: 198px;
}
#top #pic{
    float: left;
}
#pic a img{
    border: 1px solid #e0e0e8;
    padding: 2px;
    background: #fff;
}
#text h2{
    font-size: 12px;
    line-height: 45px;
}
#text h2 a{
    color: #000;
}
#text p{
    font-size: 12px;
    color:#666;
    line-height: 22px;
}
#text p span{
    font-size: 13px;
}
/* 推荐列表 */
ul li {
    font-size: 12px;
    line-height: 30px;
}
ul li span {
    color: #888;
    float: right;
}
ul li a {
    float: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07电视剧详情介绍页面</title>
    <link rel="stylesheet" href="css/list.css">
</head>
<body>
    <div id="main">
        <!-- 标题 -->
        <div id="title">
            <h2>明星荐片</h2>
        </div>
        <!-- 图片和介绍 -->
        <div id="top">
            <!-- 图片 -->
            <div id="pic">
                <a href="#">
                    <img src="image/3.gif" alt="">
                </a>
            </div>
            <!-- 文字 -->
            <div id="text">
                <h2><a href="#">周秀娜荐片:让子弹飞</a></h2>
                <p><span>导演：</span>姜文</p>
                <p><span>主演：</span>姜文 周润发 葛优</p>
                <p><span>点评：</span>我最喜欢的要算《让子弹飞》了,超喜欢...[详情]</p>
            </div>
        </div>
        <!-- 推荐 -->
        <ul>
            <li><a href="#">《巴别塔》：好的故事引人深思"</a><span>阿朵</span></li>
            <li><a href="#">《洛杉矶之战》：外星人那么弱智？</a><span>丁子俊</span></li>
            <li><a href="#">《让子弹飞》：武侠里也可以有爱情</a><span>周秀娜</span></li>
            <li><a href="#">《剑雨》：好的故事引人深思</a><span>叶年生</span></li>
            <li><a href="#">《春风沉醉的夜晚》：非常真实</a><span>如小果</span></li>
            <li><a href="#">《克洛伊》：故事简单却细致</a><span>刘若英</span></li>
        </ul>
    </div>
</body>
</html>

6.边框塌陷

6.1 清除浮动

clean

值	说明
none	默认值，允许浮动出现在两侧
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧不允许浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08float-左浮动后的塌陷问题</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px #000 solid;
            margin: 50px 0 0 0 ;
        }
        .layer1{
            border: 1px #F00,dashed;
            float: right;  
        }
        .layer2{
            border: 1px #00F,dashed;
            /* clear: left; */
            /* clear: both; */
        }
        .layer3{
            border: 1px #060,dashed;
        }
        .layer4{
            border: 1px #666,dashed;
            font-size: 12px;
            line-height: 23px;
        }
        #clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div id="father">
        <div class="layer1"><img src="image2/photo-1.jpg" alt=""></div>
        <div id="clear"></div>
        <div class="layer2"><img src="image2/photo-2.jpg" alt=""></div>
        <div class="layer3"><img src="image2/photo-3.jpg" alt=""></div>
        <div class="layer4">
            浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
        </div>
    </div>
</body>
</html>

6.2 塌陷解决方案

方案一

通过clear

在这里插入图片描述

方案二

overflow属性

在这里插入图片描述

属性值	说明
visible	默认值，内容不会被修改，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
atuo	如果内容被修剪，则浏览器会显示滚动条以便查看，如果内容没被修剪，则无滚动条

方案三

父级标签添加伪类after

在这里插入图片描述

方案四

没见人用过，就是通过设置高来实现

在这里插入图片描述

小结

清除浮动，防止父级边框塌陷的四种方法

浮动元素后面加空的div （在div中设置clear=both）
- 简单，空的div会造成html代码冗余
父级元素添加overflow属性
- 简单，下拉列表框的场景不能用
父类添加伪类after
- 写法上复杂，但没有副作用，推荐使用
设置父元素的高度
- 简单，元素固定高度后降低扩展性

二、inline-block 和float的区别

inline-block
- 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
- 位置方向不可控制，会解析空格
- 老版本的IE浏览器（6以下的版本）不支持
float
- 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
- float以后元素脱离了标准文档流，会对周围的元素产生影响，必须在它的父级上添加浮动清除样式