前端学习：浮动

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量2.2k 收藏 6
点赞数 1
文章标签： 前端 学习 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/real_laugh/article/details/123183541
版权

浮动用于改变标签默认的排列方式。
float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或另一个浮动框的边缘。
    语法：
        选择器 {
            float: 属性值;
        }
    属性值如下表：

属性值描述
none元素不浮动(默认值)。
left元素向左浮动。
right元素向右浮动。

例如：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            float: left;
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        span {
            float: left;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
    <div>
        <span>原先span不能设置高宽</span>
    </div>
</body>

</html>

效果图：

浮动的特性

    1. 浮动元素会脱离标准流(脱标)，元素不再保留原先的位置，脱离标准普通流的控制，移动到指定位置。设置了浮动的元素会漂浮在普通流的上面，不占位置。
    2. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
    注：浮动的元素是相互贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
    3. 浮动元素会具有行内块元素特性。任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

为了约束浮动元素位置，一般先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

浮动布局注意点：

1. 浮动和标准流的父盒子搭配。先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
2. 一个元素浮动了，理论上其余的兄弟元素也要浮动，以防止引起问题。
3. 浮动的盒子只会影响后面的标准流，不会影响前面的标准流。


上述浮动元素都有一个标准流的父元素，这些父元素都是有高度的，但是实际中父元素的高度大多数是需要变化的，比如新闻的长短不一。为了实现有多少孩子，父盒子就有多高(让子盒子撑开父亲)，需要清除浮动。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

满足下面三个条件时，需清除浮动：
    1. 父级没高度。
    2. 子盒子浮动了。
    3. 影响下面布局了。

clear属性可以清除该盒子是否允许有浮动元素。
语法：
    选择器 {
        clear: 属性值;
    }
属性值如下表：

属性值 描述
left不允许左侧有浮动元素(清除左侧浮动的影响)
right不允许右侧有浮动元素(清除右侧浮动的影响)
both同时清除左右两侧浮动的影响。(几乎使用both)

清除浮动的方法

1. 额外标签法(隔墙法)：
    额外标签发会在浮动元素末尾添加一个空的块标签(必须是块级标签)。如<div style="clear: both"></div>
    优点是通俗易懂，书写方便。缺点是添加了许多无意义的标签，结构化较差。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动-额外标签法</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        /* 为额外标签设置 clear: both 样式 */
        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- 额外标签 -->
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>

</html>

效果图：

 2. 父级添加overflow：
    在父级添加overflow属性，将其属性值设置为hidden、auto或scroll。
    优点是代码简洁。缺点是无法显示溢出的部分。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动-父级添加overflow</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
            /* 为父元素添加 overflow: hidden 样式 */
            overflow: hidden;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>

</html>

效果图：

3. :after伪元素法：
    :after方式是额外标签法的升级版，也是给父元素添加。
    语法：
        .类名:after {
                content: "";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
        .类名 { (只有用IE6和IE7版本的浏览器时，需要添加该语法)
            *zoom: 1;
        }
    类名习惯性约定为clearfix。
    优点是没有增加标签，结构更简单。缺点是照顾低版本浏览器。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动-after伪元素法</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>

</html>

效果图同3。

4. 双伪元素清除浮动：

    语法：
        .类名:before,.类名:after {
            content: "";
            display: table;
        }
        .类名:after {
            clear: both;
        }
        .类名 {(只有用IE6和IE7版本的浏览器时，需要添加该语法)
            *zoom: 1;
        }
    类名习惯性约定为clearfix。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动-双伪元素法</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>

</html>

效果图同3。
 

real_laugh
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WEB前端学习:CSS学习_CSS布局
01-08
文章目录CSS布局一、display二、标准三、浮动四、多列浮动布局1. 两列布局2. 三列布局3.浮动元素的特性五、清除浮动解决方法六、定位1. 边偏移2. 定位模式2.1、静态定位 static2.2、相对定位 relative2.3、绝对定位 ...
前端学习代码之-css3
04-12
本资源包“前端学习代码之-css3”旨在帮助初学者和进阶者通过实践来掌握CSS3的各种特性。 一、选择器的扩展 CSS3引入了许多新的选择器，如类选择器（.class）、ID选择器（#id）、伪类（:hover, :active, :focus）...
前端学习：浮动与盒子模型
buupoo的博客
07-08 133
每日记录前端知识点
前端学习笔记之浮动
HJHAlone的博客
03-05 108
1.浮动的规则 1）元素一旦浮动后， 脱离标准流； 朝着向左或者向右移动，直到自己的边界紧贴着包含块（一般为父元素）或者其他浮动元素的边界为止。 元素层叠关系： 标准元素---》浮动元素---》定位元素 2）浮动后的对象还是会占据空间，不会凭空漂浮 ...
前端学习笔记：CSS中浮动的原理，定位
sinat_38393872的博客
05-08 1015
CSS中Float的原理，定位的原理（fixed，absolute，relative，static）
前端学习案例-清除浮动的四种方式
qq_41632427的博客
08-18 716
前端
前端学习：CSS核心属性--列表和边框属性
hao2580的博客
08-06 280
列表和边框属性学习
【web前端】浮动
qq_61768389的博客
07-02 3103
使用课程是黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili目录一、浮动1、传统网页布局的三种方式2、标准流（普通流，文档流）3、为什么需要浮动4、什么是浮动5、浮动特性（重难点）（1）设置了浮动（ float )的元素最重要特性（2）如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列（3）浮动元素会具有行内块元素特性6、浮动元素经常和标准流父级搭配使用案例：小米布局案例1​编辑案例：小米布局案例2​编辑案例：小米
CSS学习：display和浮动
qq_63898506的博客
07-23 241
display和浮动
前端学习-浮动
qq_46040234的博客
07-31 197
1、为什么需要浮动 1.有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式 2.浮动最典型的应用:可以让多个块级元素一行内排列显示。 3.网页布局第一准则:多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。 2、什么是浮动 1.float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘 2.语法： 选择器{ float：属性值; } 3.属性值 3、浮动特性 1.浮动元素会脱离标准流 （1）脱离标准普通
CSS3学习（七）：浮动
激洪的博客
03-13 288
CSS3之浮动
前端教程：23 元素的浮动布局（上）
08-30
千锋Web前端教程_23_元素的浮动布局（上）
前端教程：24 元素的浮动布局（中）
08-30
千锋Web前端教程_24_元素的浮动布局（中）
前端教程：25 元素的浮动布局（下）
08-30
千锋Web前端教程_25_元素的浮动布局（下）
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 824
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 1025
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 606
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 285
【代码】TS如何处理js模块的类型？
理解CSS浮动：浮动与浮动布局
"CSS浮动：浮动与浮动形状" 在网页设计中，CSS（Cascading Style Sheets）浮动是一种关键的技术，用于布局和控制元素在页面上的位置。本资源是一本由Eric A. Meyer编写的关于CSS浮动的专业书籍，高清且带有书签，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值