CSS浮动(潜水艇表示)

最新推荐文章于 2024-06-11 11:02:02 发布

博客写好-开发CV

最新推荐文章于 2024-06-11 11:02:02 发布

阅读量157

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44915419/article/details/105928564

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以下有些参考哔哩哔哩pink老师的视频
注：下面第4和第6的图片浮动的潜水并不一前一后，而是浮动并排
浮动的特性:
1. 脱离标准普通流的控制(浮) 移动到指定的位置(动)
在这里插入图片描述
2. 浮动的盒子不再保留原先的位置

3.任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特征
4.浮动元素经常和标准流父级搭配使用

5.浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流(不会影响后面标准流之后的浮动)
6.浮动元素a经常和标准流父级b搭配使用(但是子元素数目不知道的情况下，父框的高度一般都是不设置的，如果该父框后面的标准流div有可能被a覆盖)
在这里插入图片描述
清除浮动的情况（上面第6点的问题）
1.父级没高度
2.子盒子浮动
3.影响下面的布局

清除浮动
1.隔墙法
2.overflow:hidden
给框添加overflow:hidden
原理：使父框形成BFC区域（Block formatting context）块级格式化上下文，计算BFC的高度时，浮动元素也参与计算
3.伪元素:after

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .biaozhun {
            width: 300px;
            height: 100px;
            background: #000;
            margin-top: 10px;
        }
        .fukuang {
            width: 300px;
            /* 不设置高度 */
            background: rgb(201, 235, 182);
            margin-top: 10px;
        }
        .clearfix:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /* IE6 7专用 */
            *zoom: 1;
        }
        .fudong {
            float: left;
            width: 300px;
            height: 290px;
            background: rgb(107, 187, 224);
        }
    </style>
</head>
<body>
    <div class="biaozhun"></div>
    <!-- 父框不设置高度，子元素浮动 -->
    <div class="fukuang clearfix">
        <div class="fudong"></div>
    </div>

    <div class="biaozhun"></div>
    <div class="biaozhun"></div>
    <div class="biaozhun"></div>
</body>
</html>

博客写好-开发CV

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动(潜水艇表示)

以下有些参考哔哩哔哩pink老师的视频注：下面第4和第6的图片浮动的潜水并不一前一后，而是浮动并排浮动的特性:1. 脱离标准普通流的控制(浮) 移动到指定的位置(动)2. 浮动的盒子不再保留原先的位置3.任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特征4.浮动元素经常和标准流父级搭配使用5.浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标...
复制链接

扫一扫

专栏目录