HTML浮动

最新推荐文章于 2023-07-23 21:47:25 发布

晴风雪舞

最新推荐文章于 2023-07-23 21:47:25 发布

阅读量273

点赞数

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

本文链接：https://blog.csdn.net/swiftwwj/article/details/54291794

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

以下代码说明什么是浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 网页里面的元素分2种， 一种是自己占一行的 叫做块元素 另一种是大家共聚一行的，一行放不下了才换行 行级元素-->
        <!-- 描述：单独的一个标签，称之为单标签，或空标签  -->
        <!-- 行级元素不具备宽高，就是你设置了也没有用 a, span -->
        <!-- 块级元素是具备宽高的 div, p, ul, li -->
        <!-- img还是行级元素，但是是特殊的行内块元素，具备宽高，有自己的特点 -->
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
            }
            #box1{
                width: 200px;
                height: 200px;
                background: yellow;
                float: left;
            }
            #box2{
                width: 300px;
                height: 300px;
                background: blue;
                float: left;
            }
            /*浮动会去比较前面有没有浮动元素，浮动只针对左右，找到的话就顶上去*/
            /*浮动的好处...见另一串代码*/
        </style>
    </head>
    <body>
        <div id="box">

        </div>
        <div id="box1">

        </div>
        <div id="box2">

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

浮动的效果

以下代码来说明浮动的好处

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            /*浮动的好处之一 可以去掉行内块自带的间距*/
            img{
                float: left;
            }
            /*浮动还可以让行内元素具备宽高*/
            a{
                width: 100px;
                height: 100px;
                background: red;
                float: left;
            }
        </style>
    </head>
    <body>
        <img src="img/1.jpg"/>
        <img src="img/7.jpg"/>
        <img src="img/8.jpg"/>
        <a href="#">aaaaa</a>
        <a href="#">bbbbb</a>
        <a href="#">ccccc</a>
    </body>
</html>

在不使用浮动时，每张图片以及每条字符串之间都会有间隙，在使用浮动以后间隙消失，如下图所示
浮动的好处

晴风雪舞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML浮动

以下代码说明什么是浮动<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>  <!-- 描述：单独的一个标签，称之为单标签
复制链接

扫一扫