09-浮动

最新推荐文章于 2024-08-03 16:08:54 发布
最新推荐文章于 2024-08-03 16:08:54 发布
阅读量153 收藏
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45240749/article/details/104875994
版权

浮动

普通流（normal flow）

  这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？CSS的定位机制有3种：普通流（标准流）、浮动和定位。

  普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

浮动（float）

  浮动最早是用来控制图片，以便达到其它元素（特别是文字）实现“环绕”图片的效果。

<!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 {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
        } 
        img {
            float: right;
        }
    </style>
</head>
<body>
    <div>1991年1月，发行专辑《一起走过的日子》，
        专辑同名主打歌获得十大劲歌金曲奖以及十大中文
        金曲奖[116-117] ；2月，发行粤语专辑
        《爱不完》[118]  ；该专辑发行首日录音带的
        销量达到16万张，而激光唱片的销量则有7.2万
        张[119] ；6月，发行国语专辑《我和我追逐的梦》
        ；同年，获得十大劲歌金曲奖最受欢迎男歌手奖
        [116] 。 1992年，在洛杉矶、旧金山等地举行美
        加巡回演唱会；9月，发行加入 刘德华 刘德华
        (3张) 华纳唱片公司以后的首张专辑《真我的风采》
        ；该专辑发行后销量达到40万张[119] ；同年，在
        提前录制的央视春晚视频中，刘德华与毛阿敏合唱
        歌曲《心中常驻芳华》[120] ；此外，他还发行
        了专辑《谢谢你的爱》，同名主打歌曲获得第十六
        届十大中文金曲奖[121] 。 
        <img src="./images/01.jpg" alt="">
        1993年1月至2月，
        在香港红袋体育馆举行20场“真我的风采演唱会”；
        4月，推出加入飞碟唱片公司后的首张专辑《真情
        难收》，其中的主打歌曲《一辈子的错》由刘德华
        作词；11月，推出专辑粤语专辑《答案就是你》，
        专辑中的歌曲《永远寂寞》获得第16届十大中文金
        曲获奖[121] 。 1994年，发行国语专辑《忘情
        水》，同名主打歌获得第17届十大中文金曲奖最
        受欢迎国语歌曲金奖以及第1届华语榜中榜Channe
        l [V]中文Top 20榜中榜歌曲奖[122-123] ；
        8月6日至25日，在香港红袋体育馆举行20场演唱
        会；11月25日，发行国语专辑《天意》；专辑中
        表达友情的主打歌曲《友谊历久一样浓》是刘德华
        个人填词的作品；同年，获得十大劲歌金曲奖最受
        欢迎男歌手奖[11] 。</div>
</body>
</html>

  后来发现浮动有个很有意思的事情：就是让任何盒子可以一行排列，因此我们就慢慢的偏离主题，用浮动的特性来布局了。

什么浮动？

  元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器 { float: 属性值; }
属性值描述
left元素向左浮动
right元素向右浮动
none元素不浮动（默认值）
<!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 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
        div:nth-child(2) {
            background-color: hotpink;
        }
        div:last-child {
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

浮动的特性

  • 浮动会脱离标准流，不占位置，会影响标准流
  • 浮动只有左右浮动

注意： 浮动首先需要添加标准流父级别

<!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>
        .father {
            /* 父级别是标准流 */
            width: 500px;
            height: 500px;
            background-color : pink;
        }
        .son {
            /* 子元素浮动 */
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

  浮动首先创建包含块的概念（包裹），就是说浮动的元素总是找到它最近的父级元素对齐，但是不会超出内边距的范围。
在这里插入图片描述
  浮动的元素排列位置，跟上一个元素（块级）有关系：

  • 如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐
  • 如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐
    在这里插入图片描述
      由此可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动，这样才能一行对齐显示。
<!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>
        section {
            width: 300px;
            height: 300px;
            background-color: hotpink;
        }
        .one > div:first-child ,
        .two > div:first-child {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
        .one > div:last-child,
        .two > div:last-child {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
        .two > div:first-child {
            float: left;
        }
    </style>
</head>
<body>
    <!-- 上一个盒子不浮动，下一个浮动 -->
    <section class="one">
        <div>上一个盒子</div>
        <div>下一个盒子</div>
    </section>
    <!-- 上一个浮动，下一个也浮动 -->
    <section class="two">
        <div>上一个盒子</div>
        <div>下一个盒子</div>
    </section>
</body>
</html>

  元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少，浮动根据元素书写的位置来显示相应的浮动。

浮动总结

  浮动的目的就是为了让多个块级元素在同一行上显示：

  • 加了浮动的盒子是浮起来的，漂浮在其他的标准流盒子上面
  • 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子
  • 特别注意：
    • 浮动的盒子需要和标准流的父级搭配使用
    • 浮动可以使元素显示模式体现为行内块特性

清除浮动

  浮动本质是用来做一些文字混排效果的，但被拿来做布局用则会有很多的问题出现。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。准确地说并不是清除浮动，而是 清除浮动后造成的影响 。

清除浮动的本质

  清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
在这里插入图片描述
在这里插入图片描述

<!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>
        .father {
            border: 1px solid red;
        }
        .demo1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        .demo2 {
            width: 150px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .xiaomao {
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="demo1"></div>
        <div class="demo2"></div>
    </div>
    <div class="xiaomao">

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

通过给父元素指定高度可以解决问题，但是很多情况下并不知道子元素有多高

清除浮动的方法

  清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}
属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响

额外标签法

  通过在浮动元素末尾添加一个空的标签，例如： " <div style=“clear:both;”></div>" ，使用其它标签，如br等亦可。

<!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>
        .father {
            border: 1px solid red;
        }
        .demo1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        .demo2 {
            width: 150px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .xiaomao {
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="demo1"></div>
        <div class="demo2"></div>
    </div>
    <div style="clear: both;"></div>
    <div class="xiaomao">

    </div>
</body>
</html>
  • 优点：通俗易懂，书写方便
  • 缺点：添加许多无意义的标签，结构化较差

父级添加overflow属性方法

  可以通过触发BFC的方式，可以实现清除浮动效果。可以给父级添加overflow为：hidden、auto、scroll都可以实现。

<!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>
        .father {
            border: 1px solid red;
            overflow: hidden;
        }
        .demo1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        .demo2 {
            width: 150px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .xiaomao {
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="demo1"></div>
        <div class="demo2"></div>
    </div>
    <div class="xiaomao">

    </div>
</body>
</html>
  • 优点：代码简洁
  • 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

  after方式为空元素的升级版，好处是不用单独加标签了：

.clearfix:after {  
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;  
}

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
  • 优点：符合闭合浮动思想 结构语义化正确
  • 缺点：由于IE6-7不支持:after，使用 zoom:1触发hasLayout
<!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>
        .faher {
            background-color: pink;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
        .box2 {
            width: 150px;
            height: 200px;
            background-color: deeppink;
            float: left;
        }
        .box3 {
            height: 100px;
            background-color: red;
        }
        .clearfix:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0px;
        }
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box3">

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

注意： content:"."; 里面尽量跟一个小点或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

使用before和after双伪元素清除浮动

  使用方法：

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
  • 优点: 代码更简洁
  • 缺点: 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
<!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>
        .faher {
            background-color: pink;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
        .box2 {
            width: 150px;
            height: 200px;
            background-color: deeppink;
            float: left;
        }
        .box3 {
            height: 100px;
            background-color: red;
        }
        .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box3">

    </div>
</body>
</html>
「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2021-09-26css浮动
qq_60332750的博客
09-26 157
当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。 一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。（这也是通常float元素需要手动指定width的原因） 浮动规则 浮动元素会被推到他的容器的边缘。 任何浮动元素都会出现在他之前的浮动元素的旁边或是下方。如果元素都是左浮动，那么第二个元素将会出现在第一个元素的右边，如果都是右浮动，第二个元素会出现在第一个元素的左边。 左浮动的盒子不能出现在
latex09-LaTeX中的浮动体.mp4
01-11
latex09-LaTeX中的浮动体.mp4 latex09-LaTeX中的浮动体.mp4
20220622-CSS09-浮动布局-浮动
DiXionYu的博客
06-23 67
浮动特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来3、相邻浮动的块元素可以并在一行，超出父级宽度就换行4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果6、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动7、浮动元素之
【Web前端HTML5&CSS3】09-浮动
VectorX's Blog
05-26 2443
1. 浮动的简介 2. 浮动的特点 3. 脱离文档流的特点 4. 简单布局 5. 练习：w3school导航条
09.尚硅谷网课9-浮动
a2274001782的博客
11-28 115
笔记来源：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 文章目录 浮动 1. 浮动的简介 2. 浮动的特点 3. 脱离文档流的特点 4. 简单布局 5. 练习：w3school导航条 浮动 1. 浮动的简介 通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用 float属性来设置于元素的浮动 none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动 注意 元素设置浮动以后，水平布局的等式便不需要强制成立 元素设置浮动以后，会完全从文档.
2021-09-19 浮动定位
li_ding_ding的博客
09-19 61
浮动定位： 属性：float：left； 取值：left；向左浮动 right：向右浮动 none：不动 解决问题： 能够让多个元素在一行中显示 特点： 1：元素一旦浮动起来将不占页面空间，脱离文档流 2:元素浮动起来后会停靠在父元素的左边或右边，或停靠在其他已经浮动的元素边缘上 ...
HTML学习之路-09浮动布局
weixin_63204687的博客
08-22 3792
对浮动布局进行相关的学习
Jquery插件-浮动广告
06-09 232
前几天工作中碰到一个在页面中显示浮动广告的功能，这类js代码实在很多，所以打算在网上找个代码复制一下就OK了，找了半天却没有找到合适的。 虽然这些代码都可以实现浮动层显示在屏幕的固定位置，并随着窗口滚动而滚动，但是现在显示器普遍比较大，页面内容只能显示在屏幕的中央，当浮动广告在左侧或右侧时，只能设置离窗口边框的距离，于是离内容区很远。我想实现浮动层能正好在内容区域的边上。 找了两三...
CSS基础知识--浮动
weixin_30596165的博客
11-26 84
无浮动 <ul style="width: 440px;"> <li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;"> <img src="http://pic.cnblogs.com/avatar/82763...
2020-09-02（浮动）
weixin_45433904的博客
09-02 110
1.浮动的简介 通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性来设置元素的浮动 可选值： none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动 注意：元素设置浮动以后，水平布局的等式不需要强制成立 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动 浮动的特点： ①浮动元素会完全脱离文档流，不再占据文档流中的位置 ②设置浮动以后，元素会向父元素的左侧或右侧移动 ③浮动元素默认不会从父元素中移出 ④浮动
09-FloatLayout-Activity
02-15
【标题】"09-FloatLayout-Activity"指的是一个与浮动布局相关的Android活动项目，它可能是一个学习资源或示例代码库，用于演示如何在Android应用中使用浮动布局（FloatLayout）。在Android开发中，布局是组织用户...
Desigo CC手册-09-Graphics-BA-CN（图形）
07-11
同时，状态和命令窗口提供了一个浮动视图，显示对象的属性、状态和相关命令，方便用户实时控制和调整。 总的来说，《Desigo CC手册-09-Graphics-BA-CN（图形）》是一份全面的指南，旨在帮助用户充分利用Desigo CC的...
2021-2022收藏资料全浮动芯棒连轧技术创新项目建议书.doc
09-26
2021年09月16日
财务管理09-第九章外币交易会计.pptx
09-21
外汇市场分为现汇市场和期汇市场，其中汇率有多种表示方式，如直接标价法、间接标价法，以及固定汇率、浮动汇率等。汇兑损益是企业在汇率变动中产生的收益或损失。 外币记账方法主要包括逐日折算法和标准汇率法。...
4个自定义倒计时
lulei5153的博客
08-03 341
【代码】4个自定义倒计时。
html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
爱敲代码的卡拉米的博客
08-03 612
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
NET语言程序设计课件-第2章 Visual C#.NET语法基础.ppt
最新发布
08-08
Visual C# .NET是一门面向对象的程序设计语言，是当前流行的.NET系列的语言。 本课程以Visual Studio为程序设计环境，对C#进行了全面阐述。 本电子课件适用于课程讲解或者课程分析参考使用。
[毕业设计]PHP图书借阅与归还管理系统(源代码+论文).zip
08-08
[毕业设计]PHP图书借阅与归还管理系统(源代码+论文)
el-cascader-panel 浮动显示
09-24
el-cascader-panel浮动显示是通过阻止冒泡事件来实现的。在点击el-cascader-panel之外的其他地方时，可以使用以下方法来判断点击位置： ``` $(document).click(function(e){ if(!$(e.target).closest("el-cascader-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值