行内元素和块级元素添加浮动后变化

最新推荐文章于 2023-06-14 23:20:23 发布

古塔前端

最新推荐文章于 2023-06-14 23:20:23 发布

阅读量3.3k

点赞数 3

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/weixin_45321331/article/details/109729426

版权

css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

浮动,开发网站中最常用的技术,标签添加浮动后会产生不同效果,让我们一起来探索一下添加浮动后,对元素产生的变化。

行内元素和块级元素添加浮动后变化

行内元素添加浮动(float)后的变化
块级元素添加浮动(float)后的变化

行内元素添加浮动(float)后的变化

想必大家都知道，在Css中，行内元素不能设置高度和宽度，但是我们可以通过一些技术,让行内元素脱离正常文档流,从而给行内元素添加高度和宽度,比如浮动.
浮动过后的行内元素更像行内块元素,因问一行可以显示多个，并且默认宽度为内容的宽度

案例
我在html文件中创建了一个a标签，a标签属于行内标签,不能直接指定大小,但是当我们给a标签添加浮动之后,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>
        a {
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>

<body>
    <a href=""></a>
</body>

</html>

如下图所示,网页中空白一片，并没有看到a
在这里插入图片描述
但是给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>
        a {
        	/*我浮动了*/
        	float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>

<body>
    <a href=""></a>
</body>

</html>

代码运行效果:

块级元素添加浮动(float)后的变化

块级元素添加浮动后,元素属性display:block相当于转换成了display: inline-block，因问一行可以显示多个块级元素,并且默认宽度为内容的宽度。

案例:

案例代码:

<!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>
        .box-hd,
        .box-bd {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 40px;
        }
        
        .box-bd {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="box-hd"></div>
    <div class="box-bd"></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>
        .box-hd,
        .box-bd {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 40px;
        }
        
        .box-bd {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="box-hd"></div>
    <div class="box-bd"></div>

</body>

</html>

实现效果:

古塔前端

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
行内元素和块级元素添加浮动后变化

浮动,开发网站中最常用的技术,标签添加浮动后会产生不同效果,让我们一起来探索一下添加浮动后,对元素产生的变化。行内元素和块级元素添加浮动后变化行内元素添加浮动(float)后的变化行内元素添加浮动(float)后的变化想必大家都知道，在Css中，行内元素不能设置高度和宽度，但是我们可以通过一些技术,让行内元素脱离正常文档流,从而给行内元素添加高度和宽度,比如浮动.案例我在html文件中创建了一个a标签，a标签属于行内标签,不能直接指定大小,但是当我们给a标签添加浮动之后,a标签就相当于从行.
复制链接

扫一扫

专栏目录