【尚硅谷】HTML5+CSS3学习笔记 （四）CSS浮动 （含大量源码）

最新推荐文章于 2023-02-02 09:47:51 发布
最新推荐文章于 2023-02-02 09:47:51 发布
阅读量433 收藏 1
点赞数 2
分类专栏： HTML+CSS+JS 文章标签： css css3 html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51630192/article/details/126194045
版权

（四）CSS浮动

== 本部分更多内容欢迎订阅专栏HTML+CSS学习专栏，将持续更新==

目录：

4.1 浮动的简介：

通过浮动可以使一个元素向其父元素的左侧或右侧移动。

使用 float 属性来设置于元素的浮动。

可选值：

  • none 默认值 ，元素不浮动
  • left 元素向左浮动
  • right 元素向右浮动

注意，元素设置浮动以后，水平布局的等式便不需要强制成立。元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动。

浮动的特点：

  1. 浮动元素会完全脱离文档流，不再占据文档流中的位置
  2. 设置浮动以后元素会向父元素的左侧或右侧移动
  3. 浮动元素默认不会从父元素中移出
  4. 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
  5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
  6. 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }

        .box2{
            width: 400px;
            height: 200px;
            background-color: orange;
            float: left;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    
</body>
</html>

4.2 浮动其他特点：

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围， 所以我们可以利用浮动来设置文字环绕图片的效果。

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化。

脱离文档流的特点：

块元素：

  • 块元素不在独占页面的一行
  • 脱离文档流以后，块元素的宽度和高度默认都被内容撑开

行内元素：

  • 行内元素脱离文档流以后会变成块元素，特点和块元素一样

脱离文档流以后，不需要再区分块和行内了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }

        .box2{
            background-color: yellowgreen;

            float: left;
        }

        .box3{
            background-color: orange
        }

        .s1{
            float: left;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>


    <!-- <div class="box1"></div>
    <p>
        在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 
    </p> -->


    <span class="s1">我是一个span</span>
    <!-- <div class="box2">helloaaaaa</div> -->
    <!-- <div class="box3">hello</div> -->

    
</body>
</html>

4.3 网页的布局：

对于一个网页，我们可以提前设置好它的一些基本布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        header, main, footer{
            width: 1000px;
            margin: 0 auto;
        }

        /* 设置头部 */
        header{
            height: 150px;
            background-color: silver;
        }

        /* 设置主体 */
        main{
            height: 500px;
            background-color: #bfa;
            margin: 10px auto;
        }

        nav, article, aside{
            float: left;
            height: 100%;
        }

        /* 设置左侧的导航 */
        nav{
            width: 200px;
            background-color: yellow;
        }

        /* 设置中间的内容 */
        article{
            width: 580px;
            background-color: orange;
            margin: 0 10px;
        }

        /* 设置右侧的内容 */
        aside{
            width: 200px;
            background-color: pink;
        }

        /* 设置底部 */
        footer{
            height: 150px;
            background-color: tomato;
        }
    </style>
</head>
<body>

    <!-- 创建头部 -->
    <header></header>

    <!-- 创建网页的主体 -->
    <main>
        <!-- 左侧导航 -->
       <nav></nav>

       <!-- 中间的内容 -->
       <article></article>

       <!-- 右边的边栏 -->
       <aside></aside>

    </main>
    
    <!-- 网页的底部 -->
    <footer></footer>
</body>
</html>

4.4 高度塌陷和BFC：

4.4.1 高度塌陷的问题：

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。

所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！

4.4.2 BFC块级格式化环境：

BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域。

元素开启BFC后的特点：

  1. 开启BFC的元素不会被浮动元素所覆盖
  2. 开启BFC的元素子元素和父元素外边距不会重叠
  3. 开启BFC的元素可以包含浮动的子元素

可以通过一些特殊方式来开启元素的BFC：

  1. 设置元素的浮动（不推荐）
  2. 将元素设置为行内块元素（不推荐）,前两种方式会让其失去宽度。
  3. 将元素的overflow设置为一个非visible的值
  4. 常用的方式：为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .outer{
            border: 10px red solid;

             /* float: left; */
             /* display: inline-block; */
             overflow: hidden;
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }
    </style>
</head>
<body>

    <div class="outer">

        <div class="inner"></div>

    </div>

    <div style="width: 200px;height: 200px;background-color:yellow;"></div>
    
</body>
</html>

BFC的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* float: left; */
            overflow: hidden;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            overflow: hidden;
        }

        .box3{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-top: 100px;
        }
    </style>
</head>
<body>

    <div class="box1">

        <div class="box3"></div>
    </div>

    <!-- <div class="box2">

    </div> -->
    
</body>
</html>

4.5 clear:

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响。

clear：

作用：清除浮动元素对当前元素所产生的影响

可选值：

  • left 清除左侧浮动元素对当前元素的影响
  • right 清除右侧浮动元素对当前元素的影响
  • both 清除两侧中最大影响的那侧

原理：

设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        div{
            font-size: 50px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }

        .box2{
            width: 400px;
            height: 150px;
            background-color: #ff0;
            float: left;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 
                由于box1的浮动，导致box3位置上移
                    也就是box3收到了box1浮动的影响，位置发生了改变
             */

             /*clear: both;*/
        }
    </style>
</head>
<body>

    <div class="box1">1</div>
    <div class="box2">2</div>
<!--    <div class="box3">3</div>-->
<!--    <span style="width:500px; height:400px; background-color: red; display: block"></span>-->
    
</body>
</html>

4.6 高度塌陷最终解决方案：

可以利用box3将box1撑起来。用结构处理表现的问题。但比较不合适。

利用伪元素after解决塌陷问题最佳：

要先将行内元素转换为块元素，并使用clear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
<!--        clear 只针对浮动-->
        .box1{
            border: 10px red solid;

            /* overflow: hidden; */
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
        }

        .box3{
            clear: both;
        }

        .box1::after{
            content: '';
            clear: both;
            display: block;
        }
        
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
        <!-- <div class="box3"></div> -->
    </div>
    
</body>
</html>

4.7 clearfix:

clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可。

外边距重叠问题：父元素和子元素的外边距重叠时，父元素随着子元素的外边距变化，一同变化。（如父元素随着子元素一同下移）

可以利用display:table，在不占地方的情况下，解决外边距重叠问题。

而利用clearfix，可以同时解决高度塌陷以及外边距重叠的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        /* .box1::before{
            content: '';
            display: table;
        } */

        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }

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

    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
    
</body>
</html>

参考教程：尚硅谷 HTML+CSS b站教程

以上就是本章节的笔记整理，后续也会继续坚持更新我的HTML+CSS学习笔记。

如有错误，欢迎提出指正，在评论区和我一起交流。
往期回顾：
（二）CSS基础
（三）CSS布局

木瓜星灵TT
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p9-p10】
tudouzibututou的博客
12-14 467
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇 尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p9(18:31) 一、进制 1.十进制 -特点：满10进1 单位数字10个(0-9） 2.二进制（计算机底层进制） -特点：满2进1 -单位数字2个(0、1） -所有数据在计算机底层都会以二进制形式保存 -可以将内存想象成多个小格子储存的容器，每一个小格子都可以存储一个1或一个0 -这一个小格子在我们内存中被称为1位(bit) -8个bit=1byte(字节） -102
尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p20-p26】
tudouzibututou的博客
12-15 284
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇 尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p20（10:44) 一、超链接 1.跳转到其他页面 -使用a标签来定义超链接 -超链接也是行内元素，在a标签中可以嵌套除它以外的任何元素。 -href属性，用来指定跳转的路径。 -href的值可以是外部网页的一个地址，也可以写一个内部页面的地址。 2.跳转到当前页面其他位置 -最好使用相对路径 p21(16:04) 一、相对路径 1.一般当我们需要跳转到一个服务器的内部
HTML5+CSS3笔记（尚硅谷）
weixin_46595440的博客
02-02 1062
HTML5+CSS3笔记
HTML5+CSS3+ES5/6+TS+WebAPI前端入门/实习题库笔记
luemeon的博客
03-25 5876
菜鸟教程，尚硅谷，牛客
广告浮动效果源码
08-27
广告浮动效果源码，浮动在页面上的广告，下载直接能看效果。可直接放在自己的项目中运用。
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
html5+css3笔记资料
02-14
html5+css3笔记资料
html+css和html5+css3的学习笔记。
06-10
总结了html+css和html5+css3的基础学习知识。
HTML5+CSS3 markdown笔记
11-17
个人总结出来的，希望有用到的人可以好好利用它
HTML5+CSS3期末大作业——城市简介源码
05-05
HTML5+CSS3期末大作业——城市简介源码
尚硅谷HTML5&CSS3 前端学习笔记03_超链接_相对路径_页面跳转_图片标签
KarinAu的博客
07-02 314
超链接 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 超链接可以让我们从一个页面跳转到其他页面， 或者是当前页面的其他位置 使用a标签来定义超链接
尚硅谷_HTML5 核心 笔记
earthOLtainanwan的博客
08-26 949
目录
html浮动代码_（10）让“盒子”动起来： 浮动 | CSS
weixin_39786155的博客
11-24 4197
原创：itsOli@前端一万小时本文版权归作者所有，未经授权，请勿转载！本文节选自“语雀”私有付费专栏「前端一万小时|从零基础到轻松就业」1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？2.清除浮动指什么？如何清除浮动？两种以上方法。?上方面试题“参考答案详解”，请点击文末“前言：前 10 篇文章，我们基本上都是在用“理论”学习“理论”。从这篇开...
B站尚硅谷HTML&CSS核心基础教程全笔记
小吴Der
08-06 821
/* CSS语法： 结构：选择器+声明块（{}） 选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的应用样式应用到对应的 素上。 声明块：紧跟在选择器后面，用大括号括起来，实际上是一组一组的名值对结构， 我们称为声明。多个声明之间使用分号隔开，声明的样式名与样式值之间用冒号连接。 */ /* 块和内联元素 div：就是一个块元素，所谓的块元素就是会独占一行，无论内...
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
qq_43754404的博客
01-05 7432
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14…19 20 单位数字：10个（0-9） 2.二进制（计算机底层的进制）： 特点：满2进1 计数：0 1 1...
通过JS如何获取DOM节点元素
Fancy_vae的博客
09-13 3567
JS中获取DOM元素的方法总共有5种： 1.通过id值。 2.通过name属性值。 3.通过指定的标签名。 4.通过class类名。 5.通过css选择器（css选择器如何选择，就可以如何选择） 1、通过id选取元素（getElementById） 1）使用方法：document.getElementById(“domId”) 其中，domId为要选取元素的id属性值 2）兼容性：低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的，并且会返回匹配name属性的元素
《尚硅谷Web前端初学者零基础入门HTML+CSS基础教程全套完整版》学习记录1
Han_python的博客
12-12 636
软件的架构 我们常用的软件架构是C/S架构，即客户端/服务器架构。这种架构有三个特点： 1：软件使用前必须得安装 2：软件更新时，服务器和客户端得同时更新 3：C/S架构的软件不能跨平台使用 4：C/S架构的软件客户端和服务器通信采用的是自有协议，相对来说比较安全。（协议相当于密码本，对传输内容进行加密） B/S架构（browsers/server）是指浏览器/服务器架构，本质上也是C/S，只不过B/S架构软件使用浏览器作为软件的客户端。通过使用浏览器访问网页的形式，来使用软件。 1：软件不需要安装 2：客
【CSS学习】清除浮动--附源码效果
m0_61486963的博客
04-30 193
本文实验了常用的三个清除浮动的方法 BFC 伪元素::after 空白标签法
尚硅谷HTML5&CSS3 前端学习笔记02_VSCode_liveServer_实体_meta标签_语义化标签_列表
KarinAu的博客
07-01 260
字符编码 <!doctype html> <html> <head> <!-- 可以通过meta标签来设置网页的字符集，避免乱码问题--> <meta charset="utf-8"> <title>网页的基本结构</title> </head> <body> <!-- 迭代 网页的版本 HTML4 XHTML2.0 HTML5 ..
html5笔记+css3笔记
最新发布
12-25
HTML5笔记： HTML5是一种用于构建网页的标准标记语言，它具有很多新的特性和功能。其中包括语义化标签、多媒体支持、本地存储、拖放功能等。HTML5还支持响应式设计，能够使网页在不同的设备上都能够良好的显示和交互。另外，HTML5还提供了一些新的API，如地理位置、Web存储、WebSocket等，使得网页开发具有更多的可能性和创新空间。 CSS3笔记： CSS3是用于网页样式设计的语言，它引入了很多新的特性和功能。其中包括圆角、阴影、过渡、动画、媒体查询、多列布局等。借助这些新特性，开发者可以更加轻松地实现网页的视觉效果，使得网页具有更加丰富的外观和交互。CSS3还支持响应式设计，可以根据设备的不同来调整网页的样式和布局，从而提供更好的用户体验。另外，CSS3还提供了对字体、颜色、渐变等方面的增强功能，使得网页的设计更加灵活和个性化。 综上所述，HTML5和CSS3的新特性和功能为网页开发带来了更多的可能性和创新空间，使得开发者可以更好地实现丰富多样的网页设计和交互效果。因此，掌握HTML5和CSS3的知识是非常重要的，可以帮助开发者更好地实现自己的网页设计理念和创意。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值