浮动的使用

最新推荐文章于 2023-07-12 20:30:13 发布
最新推荐文章于 2023-07-12 20:30:13 发布
阅读量403 收藏 2
点赞数
分类专栏： CSS3学习笔记 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34771938/article/details/119948778
版权
  • 浮动的最本质功能：用来实现并排。
float: left;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            float: left;
        }

        #div1 {
            background-color: red;
        }

        #div2 {
            background-color: green;
        }

        #div3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <!-- 浮动实现并排 -->
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

</html>

 

浮动的使用 

  • 浮动使用要点：要浮动，并排的盒子都要设置浮动。
  • 父盒子要有足够的宽度，否则子盒子会掉下去。

 其中一个盒子没有浮动的效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        #div1 {
            background-color: red;
            float: left;
        }

        #div2 {
            background-color: green;
        }

        #div3 {
            background-color: blue;
            float: left;
        }
    </style>
</head>

<body>
    <!-- 浮动实现并排 -->
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

</html>

 

 父盒子宽度不足的效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .main {
            width: 299px;
            height: 100px;
            border: 1px solid #000;
        }

        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        #div2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }

        #div3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>

<body>
    <!-- 浮动实现并排 -->
    <div class="main">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>

</html>

 浮动的顺序贴靠特性

  • 子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .main {
            position: relative;
            top: 10px;
            left: 10px;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }

        #div1 {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }

        #div2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }

        #div3 {
            width: 100px;
            height: 150px;
            background-color: blue;
            float: left;
        }

        #div4 {
            width: 100px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>

<body>
    <!-- 浮动的顺序贴靠特性 -->
    <div class="main">
        <div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
        <div id="div4">4</div>
    </div>
</body>

</html>

 浮动的元素一定能设置宽高

  • 浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等。

右浮动

float:right;/*即可设置右浮动*/

注意事项

  •  垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！
  • “大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动。

 使用浮动实现网页布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header {
            width: 800px;
            height: 100px;
            margin: 0 auto;
            border: 1px solid #000;
        }

        main {
            width: 800px;
            height: 600px;
            margin: 10px auto;
            border: 1px solid #000;
        }

        footer {
            width: 800px;
            height: 100px;
            background-color: silver;
            margin: 0 auto;
            border: 1px solid #000;
        } 
        
        header div.logo {
            width: 200px;
            height: 100px;
            background-color: yellow;
            float: left;
        }

        header div.r1 {
            width: 200px;
            height: 40px;
            background-color: yellowgreen;
            float: right;
        }

        header div.r2 {
            width: 500px;
            height: 40px;
            background-color: blueviolet;
            float: right;
            margin-top: 20px;
        }

        main div.aside {
            width: 250px;
            height: 600px;
            background-color: red;
            float: left;
        }

        main div.content {
            width: 500px;
            height: 600px;
            float: right;
        }

        main div.content div.cont1 {
            width: 500px;
            height: 500px;
            background-color: rgb(75, 160, 230);
        }

        main div.content ul li {
            list-style: none;
            width: 100px;
            height: 80px;
            margin-top: 20px;
            margin-right: 25px;
            background-color: cyan;
            float: left;
        }

        main div.content ul li:last-child {
            width: 125px;
            margin-right: 0;
            float: left;
        }
    </style>
</head>

<body>
    <!-- 使用浮动实现网页布局 -->
    <header>
        <div class="logo"></div>
        <div class="r1"></div>
        <div class="r2"></div>
    </header>
    <main>
        <div class="aside"></div>
        <div class="content">
            <div class="cont1"></div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </main>
    <footer>

    </footer>
</body>

</html>

BFC规范

  • BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

 从一个现象开始说起

  • 一个盒子不设置height，当内容子元素都浮动时，无法撑起自身。
  • 这个盒子没有形成BFC。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .main {
            width: 600px;
            border: 10px solid #000;
        }

        .v1 {
            width: 300px;
            height: 300px;
            background-color: red;
            float: left;
        }
        
        .v2 {
            width: 300px;
            height: 300px;
            background-color: green;
            float: left;
        }
    </style>
</head>

<body>
        <div class="main">
            <div class="v1"></div>
            <div class="v2"></div>
        </div>
</body>

</html>

如何创建BFC

  • 方法①：float的值不是none。
  • 方法②：position的值不是static或者relative。
  • 方法③：display的值是inline-block、flex或者inline-flex。
  • 方法④：overflow:hidden;

什么是overflow:hidden;

  • overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏。
  • overflow:hidden;是非常好用的让盒子形成BFC的方法。

BFC的其他作用 

  • BFC可以取消盒子margin塌陷。
  • BFC可以可以阻止元素被浮动元素覆盖 。

清除浮动

  • 清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响。

        没有清除的效果： 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</body>

</html>

清除浮动方法1

  • 清除浮动方法1：让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <p></p>
        <p></p>
    </div>
</body>

</html>

 

清除浮动方法2

  • 清除浮动方法2：给后面的父盒子设置clear:both属性。clear表示清除浮动对自己的影响，both表示左右浮动都清除。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        .v2 {
            clear: both;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div class="v1">
        <p></p>
        <p></p>
    </div>
    <div class="v2">
        <p></p>
        <p></p>
    </div>
</body>

</html>

清除浮动方法3

  •  清除浮动方法3：使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div::after {
            /* 一定要添加content，注意要转为块级元素 */
            content: "";
            clear: both;
            display: block;
        }

        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div class="v1">
        <p></p>
        <p></p>
    </div>
    <div class="v2">
        <p></p>
        <p></p>
    </div>
</body>

</html>

清除浮动方法4

  • 清除浮动方法4：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        p {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-right: 20px;
        }

        .wall {
            clear: both;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
        <p></p>
    </div>
    <div class="wall"></div>
    <div>
        <p></p>
        <p></p>
    </div>
</body>

</html>
小豪boy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML——浮动的用法
qq_45814070的博客
11-22 954
CSS *{ margin: 0; padding: 0; }/*网页内外边距*/ body{ width: 100%; height: 100%; font-size: 14px; } header{ width: 100%; height: 100px; background-color: rgba(50,0,100,0.5); } .top{ width: 1200px; ...
浮动的使用办法
F_eve的博客
11-20 960
一：为什么要使用浮动？ 为了解决文字环绕问题。 解决横向排列问题。 二：浮动的基本特征: float: left; (左浮动，元素靠上靠左) float: right; (右浮动，元素靠上靠右) 默认值为：none 特点：当一个元素经过浮动后，元素必定变为快盒。浮动元素的包含快为父容器的内容盒。 三：浮动盒子尺寸 宽度或者高度为auto时，适应内容宽度或者高度。 margin为auto时，等同于0。 边框，内边距等于常规流布局。 举例： <!DOCTYPE html> <html
css--浮动的简介
MondayCui的博客
09-23 246
通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用 float 属性来设置于元素的浮动 可选值： none 默认值 ，元素不浮动 left 元素向左浮动 right 元素向右浮动 注意，元素设置浮动以后，水平布局的等式便不需要强制成立 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置， 所以元素下边的还在文档流中的元素会自动向上移动 浮动的特点： 1、浮动元素会完全脱离文档流，不再占据文档流中的位置 2、设置浮动以后元素会向父元素的左侧或右侧移动， 3、浮动元素默认不会从父元素中移出 4.
CSS 关于浮动
09-25
解决这个问题通常需要使用“清除浮动”（clear）。 `clear`属性允许元素避免被浮动元素影响。`clear: both`是最常用的选择，它确保元素下方不会有任何浮动元素。此外，还有`clear: left`、`clear: right`和`clear: ...
使用AvalonDock完成窗体的浮动停靠
09-09
本篇文章将深入探讨如何使用AvalonDock实现窗体的浮动与停靠，并结合中文提示来帮助开发者更好地理解和应用。 首先，了解AvalonDock的基本结构和工作原理是至关重要的。AvalonDock的核心组件是`DockingManager`，它...
Android浮动窗口
11-05
对于浮动窗口，我们可以使用`WindowManager.LayoutParams.TYPE_SYSTEM_ALERT`类型： ```java WindowManager.LayoutParams params = new WindowManager.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ...
CSS使用float属性设置浮动元素的实例教程
09-24
需要注意的是，随着CSS布局技术的发展，如Flexbox和Grid的出现，浮动在某些场景下的使用逐渐减少，因为这些新布局模型提供了更强大、更灵活的控制方式，可以更方便地实现复杂的布局设计，而不需要处理浮动带来的问题...
使用angularjs实现浮动表单效果特效代码
03-20
在本文中，我们将深入探讨如何使用AngularJS框架来实现一种浮动表单的视觉效果，这种效果通常用于增强用户界面的动态性和交互性。AngularJS，作为一个强大的MVC（模型-视图-控制器）前端框架，提供了丰富的功能和...
浮动的基本使用
Artorias的博客
03-25 229
如果一个网站只有标准文档流，很多效果是不能实现的，如果要实现非标准特点的页面就必须让标签去标准化，让标签脱离标准流，这时浮动便发挥作用了 简介 浮动属性是专门用来进行网页并排布局 作用：脱离标准文档流，不在受元素等级的限制，既可以并排显示，又可以设置宽和高 float :属性就是设置元素浮动 属性值：left 、right 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
浮动的用法
weixin_44489400的博客
02-22 499
在我们html的布局中常常会用到float（浮动）在页面布局时，一般用float属性来实现多栏布局，导航菜单等等，往往是用于图像和文字。元素的水平方向浮动意味着元素只能左右移动而不能上下移动。如果你把几个浮动的元素放到一起，有空间的话，它们将彼此相邻。 常用的浮动是左浮动(left)和右浮动(right)。 下面是没加浮动的布局： 下面是加了左浮动的： 代码： &lt;style type="...
2021-05-08
Y20030303003的博客
05-08 226
HTML的选择器 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 作者：严某某 撰写时间：2021/5/7 定义和用法： float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。在页面布局时，一般用float属性来实现多栏布局，导航菜单等等。 浮动(fl..
布局中浮动的使用
weixin_46412436的博客
06-08 1126
个人是个前端职场小白，只是想将自己理解的内容与大家分享。希望对大家有用。谢谢！ 浮动布局 1. 浮动流是一种“半脱离标准流”的排版方式 浮动流只可设置水平排版，包括float:left和float:right两种方式。 注意: 1）浮动流中没有居中对齐这一功能； 2）浮动流会使块元素的margin：0 auto属性失效。 2. 在浮动流中不区分块元素，行内元素和行内元素 在浮动流中，无论你是块元素，行内元素还是行内元素都可以设置宽高。在标准流中，行内元素是无法设置高度的。 3. 浮动元素会
有关浮动的介绍和使用说明
LZww9900的博客
12-03 437
一 序言 浮动是一项比较常用的技术，掌握它能够更好的去处理一些内容 二 主体
浮动的特性及使用
passion0的博客
02-27 137
4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both;概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠。文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示。不浮动，默认值，并且会显示在其文本中出现的位置。
什么是浮动，如何应用浮动
weixin_45966220的博客
10-13 1632
在说float（浮动）之前应该让大家了解下什么是浮动，其实浮动这个属性在没有被清除浮动之前它在文档流里面表现出来的现象就像我们生活中的河流或者大海，里面有水有鱼有各种沉积物比如船啊什么的，我们可以把鱼、水、和沉船都看成我们前端的文档流里面的元素，那么如果其中鱼自然死亡会从水里漂浮在水面上，那么之前鱼在水中所占的位置就会被水填充，并且鱼会随着水流向下游飘去。那么这个现象就好似前端页面元素的浮动，浮动的元素脱离了原有的文档流，但是又没有完全脱离，暂且可以理解为脱离了半个文档流，那么下面的元素就会自动填充浮动元素
前端必知：13.浮动的使用与清浮动
qq_52799985的博客
07-12 448
防止ie低版本具有默认高度height: 0;
标准流浮动布局
m0_58467224的博客
06-01 80
标准流浮动
linux内存使用浮动
最新发布
07-27
Linux内存使用率指的是当前系统中已使用的内存占总内存的比例。可以通过命令free或者top查看系统的内存使用情况。其中，free命令可以显示系统的空闲内存、已使用内存、缓存和交换分区等信息，而top命令则可以实时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值