CSS3快速入门：五、浮动

最新推荐文章于 2024-10-02 15:35:50 发布

嵩華想睡觉

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量529

点赞数 2

分类专栏： CSS 文章标签： css 父级边框塌陷浮动清除浮动 display

本文链接：https://blog.csdn.net/xfjssaw/article/details/115584638

版权

CSS 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

浮动

在CSS中，浮动是非常重要的一个功能，主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动。

CSS系列文章目录

文章目录

浮动

1. 标准文档流

CSS中标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元元素，其中块级元素独占一行，而行内元素可以自左至右排列，且行内元素可以包含在块级元素中，反之却不可以。如图：
在这里插入图片描述

2. display

display属性的几个常用属性值：

block：块元素。
inline：行内元素。
inline-block：块元素，但具有行内元素并排显示的特性。
none：隐藏元素，其对应的物理位置也消失。

display属性练习代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display属性练习</title>
    <style>
        h1{
            /*块元素转化为行内元素*/
            display:inline;
        }
        h1,img{
            vertical-align: middle;
        }
        li{
            /*行内块元素*/
            display:inline-block;
        }
        a{
            /*行内元素转化为块元素*/
            display:block;
        }
        #slogan{
            /*隐藏元素*/
            display:none;
        }

    </style>
</head>
<body>
    <div>
        <h1>许嵩</h1>
        <img src="./images/vae.png" alt="">
        <p>
            个人简介：许嵩（Vae），1986年5月14日生于安徽省合肥市，
            中国内地流行乐男歌手、词曲创作人、音乐制作人，
            现任海蝶音乐公司（现为太合音乐集团）音乐总监，毕业于安徽医科大学。
        </p>
        <div>
            <h3>已发表的专辑：</h3>
            <ul>
                <li>自定义</li>
                <li>寻雾启示</li>
                <li>苏格拉没有底</li>
                <li>梦游计</li>
                <li>不如吃茶去</li>
                <li>青年晚报</li>
                <li>寻宝游戏</li>
            </ul>
        </div>
        <a href="https://passport.weibo.com/visitor/visitor?entry=miniblog&a=enter&url=https%3A%2F%2Fweibo.com%2Fvae&domain=.weibo.com&sudaref=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D1kGm8YTf9vZe7RWkS2Sw95gNxVSGo2f0O0RgsyD8KsjjEFykfDUei_55zNmBuBgf%26wd%3D%26eqid%3Dc7157cc600452c15000000026071b39c&ua=php-sso_sdk_client-0.6.36&_rand=1618064330.2471" alt="许嵩的新浪微博">新浪微博</a>
        <a href="https://m-xusong.taihe.com/posts/794860" alt="Vae+许嵩官方App">Vae+</a>
        <div id="slogan">因为一个人 爱上一群人</div>
    </div>
</body>
</html>

网页显示如下：
在这里插入图片描述

3. float

css样式的float属性，用于设置标签对象的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right),其属性默认值为none不浮动。
代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float属性练习</title>
    <style>
        div{
            width:300px;
            height:300px;
        }
        .div1{
            border:1px solid black;
            float:left;
        }
        .div2{
            border:1px solid red;
            float:right;
        }
    </style>
</head>
<body>
    <div class="div1">

    </div>
    <div class="div2">

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

网页显示如下：

在这里插入图片描述

4. 清除浮动

清除浮动的方式如下：

clear属性：left，在左侧不允许浮动元素；right，在右侧不允许浮动元素；both，在左右两侧均不允许浮动元素。clear:left|right|both;
增加一个空的div块，再clear:both。
设置父级元素的高度。
overflow属性： overflow:hidden。
:after伪类：父级元素:after{ content: ""; display:block; clear:both; }。