构建静态页面 之 [ 浮动 ]

头像
蔡志远
    阅读 6 分钟

    浮动

    描述

    • 是对页面布局的一种表现方式
    • 设置浮动的元素会脱离文档流
    • 设置浮动的元素会改变后面元素的显示位置

    float属性

    • 表示设置元素浮动

      • left属性值 - 表示设置元素左浮动
      • right属性值 - 表示设置元素右浮动
    • 设置浮动的元素会脱离文档流，指定元素后面的元素会自动向前，形成重叠的显示效果
    <head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        /*
            float属性 - 表示设置元素浮动
             * left属性值 - 表示设置元素左浮动
             * right属性值 - 表示设置元素右浮动
            * 设置浮动的元素会脱离文档流，指定元素后面的元素会自动向前，形成重叠的显示效果
         */
        div {
            width: 200px;
            height: 200px;
        }
        #d1 {
            background-color: red;
            float: left;
        }
        #d2 {
            background-color: green;
            width: 300px;
            height: 300px;
        }
        #d3 {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>

    9207

    元素类型的浮动

    块级元素浮动

    • 垂直方向排列改为水平方向排列
    • 显示宽度由父级宽度的 100% 变为 0（在没设宽的情况下）
    <head>
    <meta charset="UTF-8">
    <title>元素类型的浮动</title>
    <style>
        /*
            块级元素浮动
            * 垂直方向排列改为水平方向排列
            * 显示宽度由父级宽度的 100% 变为 0（在没设宽的情况下）
         */
        div {
            width: 200px;
            height: 200px;

            /* 设置浮动 */
            float: left;
            
            /* 块级元素 */
            display: block;
        }
        #d1 {
            background-color: red;
        }
        #d2 {
            background-color: green;
        }
        #d3 {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>

    9219

    内联元素浮动

    • 允许设置宽度和高度
    <head>
    <meta charset="UTF-8">
    <title>元素类型的浮动</title>
    <style>
        /*
            内联元素浮动
            * 允许设置宽度和高度
         */
        div {
            width: 200px;
            height: 200px;

            /* 设置浮动 */
            float: left;
            
            /* 内联元素 */
            display: inline;
        }
        #d1 {
            background-color: red;
        }
        #d2 {
            background-color: green;
        }
        #d3 {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>

    9254

    行内块级元素浮动

    • 去掉了元素之间的间隙
    <head>
    <meta charset="UTF-8">
    <title>元素类型的浮动</title>
    <style>
        /*
            行内块级元素浮动
            * 去掉了元素之间的间隙
         */
        div {
            width: 200px;
            height: 200px;

            /* 设置浮动 */
            float: left;

            /* 行内块级元素 */
            display: inline-block;
        }
        #d1 {
            background-color: red;
        }
        #d2 {
            background-color: green;
        }
        #d3 {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>

    9214

    父子关系的浮动

    • 子级元素的浮动范围，不能超出父级元素的所在区域范围
    • 父级元素浮动，子级元素也会跟随父级一同浮动
    <head>
    <meta charset="UTF-8">
    <title>父子关系的浮动</title>
    <style>
        /*
            父子关系的浮动
            * 子级元素的浮动范围，不能超出父级元素的所在区域范围
            * 父级元素浮动，子级元素也会跟随父级一同浮动
         */
        #d1 {
            width: 300px;
            height: 300px;
            background-color: red;
            float: right;
        }
        #d2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: right;
        }

    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

    9227

    兄弟关系的浮动

    • 如果下一个兄弟元素浮动，下一个兄弟元素不会超过上一个兄弟元素所占的区域位置
    <head>
    <meta charset="UTF-8">
    <title>兄弟关系的浮动</title>
    <style>
        /*
            兄弟关系的浮动
            * 如果下一个兄弟元素浮动，下一个兄弟元素不会超过上一个兄弟元素所占的区域位置
         */
        div {
            width: 200px;
            height: 200px;
        }
        #d1 {
            background-color: red;
        }
        #d2 {
            background-color: green;
            float: right;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

    9235

    高度塌陷

    • 父级元素没设高度，子级元素设置浮动 - 父级元素会高度塌陷
    • 高度塌陷 - 仅存在父子关系中

    解决方法

    • 为父级元素设置高度

    • 开启BFC环境

      1. 浮动可以开启 - 脱离文档流
      2. 将元素类型改为行内块级元素可以开启 - 行内块级元素的本身问题
      3. overflow属性 属性值为hidden时可以开启 - 解决内容溢出
      4. 设置绝对定位可以开启 - 脱离文档流
    • 注意：开启BFC方法所带来的副作用
    <head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
        /*
            高度塌陷 - 仅存在父子关系中
            * 父级元素没设高度，子级元素设置浮动 - 父级元素会高度塌陷
            解决方法：
            * 为父级元素设置高度
            * 开启BFC环境
             * 浮动可以开启 - 脱离文档流
             * 将元素类型改为行内块级元素可以开启 - 行内块级元素的本身问题
             * overflow属性 属性值为hidden时可以开启 - 解决内容溢出
             * 设置绝对定位可以开启 - 脱离文档流
            * 注意：开启BFC方法所带来的副作用

         */
        #d1 {
            border: 10px solid black;
            /* 父级元素没有设置高度 */

            /* 为父级元素设置高度 */
            height: 200px;

            /* 开启BFC环境 - 解决高度塌陷 */
            /* 设置浮动 */
            float: left;

            /* 改变元素的类型为行内块级元素 */
            display: inline-block;

            /* 设置overflow属性 */
            overflow: hidden;
        }
        #d2 {
            width: 300px;
            height: 200px;
            background-color: #2196f3;
            /* 子级元素设置为浮动 */
            float: left;
        }

    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

    9242

    csshtml
    蔡志远
    9 声望5 粉丝
    « 上一篇
    构建静态页面 之 [ 显示和溢出 ]
    下一篇 »
    构建静态页面 之 [ 盒子模型 ]

    引用和评论

    推荐阅读
    头像
    Ajax 之 [ jQuery中的Ajax ]

    蔡志远阅读 1.3k

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.5k评论 3

    0 条评论
    得票最新