首页 > 其他分享 >HTML和CSS中的浮动以及边框塌陷解决方案（内置练习及答案）

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

时间：2024-09-26 20:50:57浏览次数：3  
标签：浮动 float top 元素 边框 1px HTML border 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以后元素脱离了标准文档流，会对周围的元素产生影响，必须在它的父级上添加浮动清除样式

三、总结

在这里插入图片描述

标签：浮动,float,top,元素,边框,1px,HTML,border,CSS
From： https://blog.csdn.net/qq_63946637/article/details/142532567

相关文章

  • CSS布局中的定位
    一、position1.staticposition:static;默认值，没有定位2.relative相对定位：相对自身原来的位置进行偏移偏移设置：top、left、right、bottom相对定位元素的规律：设置相对定位的盒子会相对于它原来的位置，通过指定的偏移，到达新的位置设置相对定位的盒子仍然在标准的......
  • CSS——边框过渡效果
    CSS——边框过渡效果今天浅浅的水一下边框过渡效果。按钮边框过渡效果小小的解释一波这里采用了一个外围的容器盒子，为了实现容器盒子的水平居中（这个简单）和垂直居中（这个就稍微复杂一些，往后可能会出一期专门设置垂直居中的文章），我还是请出了Flex弹性盒子，真的是太好......
  • HTML5实现大文件分片上传实例
    前端：vue2,vue3,vue-cli,html5,webuploader后端：asp.net,jsp,springboot,php,数据库：MySQL,Oracle,SQLServer,达梦,人大金仓,国产数据库功能：超大文件上传,文件和文件夹批量上传，断点续传，加密上传，视频上传技术：百度webuploader，分块，切片，断点续传，秒传，MD5验证，纯JS实现，支持第三方......
  • css-functions伪类选择器系列二
    一张图浏览CSSFunctions概述本文主要讲述CSS的部分伪类选择器第二篇，包括：:nth-child、:nth-last-child、:nth-of-type和:nth-last-of-type。:nth-child():nth-child伪类是根据父元素的子元素列表中的索引来选择元素。语法:nth-child是以一个参数nth来描述匹配兄弟元素......
  • CSSE2310 Command Line Arguments
    CSSE2310–Semester2,2024Assignment3IntroductionThegoalofthisassignmentistodemonstrateyourskillsandabilityinfundamentalprocessmanagementandcommunicationconcepts(pipesandsignals),andtofurtherdevelopyourCprogrammingskills......
  • scss概念
    SCSS（SassyCSS）是CSS的一种预处理器语言，它在CSS的基础上提供了更多的功能和灵活性，使得样式表的编写和管理更加高效和便捷。以下是SCSS的一些优势：变量（Variables）：SCSS允许使用变量来存储颜色、字体大小等数值，使得在整个样式表中统一调整这些值变得更加方便和可维护。嵌套（NestedRules）：可......
  • html表格
    1.基本结构2.行标题和列标题SaturdaySundayTicketssold:120135Totalsales:$600$6753.跨列9am10am11am12amMondayGeographyMathArtTuesdayGymHomeEc4.跨行ABCBBCCNN6pm-7pmMovieComedyNews7pm-8pmSport......
  • html基础笔记
    行级元素和块级元素<!--行内块级元素--><!--1、能设置宽高--><!--2、能呆在一行--><!--常见的行内块级元素：img表单inputtextareaselect--><!--块级元素--><!--1、能设置宽高--><!--2、不和其他元素呆在同一行，霸占一行--><!--常见的块级元素：divpull......
  • HTML与CSS二三事
    概述HTML是英文HyperTextMark-upLanguage(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！如下图：HTML页面主体格式如......
  • CSS常用样式及示例
    CSS常用样式及示例 一、简介   层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99