CSS3系列 09 浮动布局

最新推荐文章于 2023-03-02 08:46:54 发布

云崖先生

最新推荐文章于 2023-03-02 08:46:54 发布

阅读量305

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/weixin_43422005/article/details/118926167

版权

浮动布局

基本介绍

浮动布局是CSS早期最常使用的一种布局方式。

说白了就是使元素进行漂浮，从而脱离默认文档流排列的一种技术手段。

使用浮动布局应该注意以下几点：

浮动应当发生在一个大盒子内部（body标签也可以看做一个大盒子）
浮动后的元素会影响后面未浮动元素的排列方式
浮动元素会自动转换为inline-block状态
浮动元素只会在父盒子的content区域，不会溢出到父盒子的padding区域
当一个父盒子中所有的元素都进行浮动后，可能会造成父盒子高度塌陷的问题

使用浮动

对一个元素使用float就可以让该元素漂浮起来，它可以指定以下一些方向：

选项	说明
left	向左浮动
right	向右浮动
none	不浮动

注意！使用向右浮动会发生倒序排列，1234变为4321，而左浮动则是正序排列。

如果你不想右浮动改变他们的排列顺序，则可以将它们全部包装在一个父级标签中，将父级标签右浮动，再将子标签做浮动。

如下图所示：

文档流

文档流排列是一种自上而下，自左向右的排列方式。

对于block块级元素来说，它应该是独占一行的。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        * {
            box-sizing: border-box;
        }

        main {
            width: 230px;
            padding: .5rem;
            border: 1px solid #000;
        }

        main div {
            width: 100px;
            height: 100px;
        }

        main div:nth-of-type(1) {
            border: 1px solid blue;
        }

        main div:nth-of-type(2) {
            background-color: red;
        }
    </style>
</head>

<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>

</html>

渲染结果：

空间占用

在同级情况下，排列在前的一个标签如果进行浮动设置从而脱离了文档流，那么排列在后的标签会占用之前标签的位置。

如下所示，排列在前的蓝框div如果float: left后，排列在后的红色背景div会向上顶，占用掉之前蓝框div所在的空间位置，而蓝框div则漂浮在了红色背景div的上方。

        main div:nth-of-type(1) {
            border: 1px solid blue;
            float: left;
        }

如果排列在前的蓝框div设置为float: right后，排列在后的红色背景div依旧会向上顶，占用掉之前蓝框div所在的空间位置。

        main div:nth-of-type(1) {
            border: 1px solid blue;
            float: right;
        }

如果我们对排列在后的红色背景div进行浮动设置的话，排列在前的标签并不会受此影响，但会出现父级高度塌陷问题，即父级盒子的高度会出现令人意外的情况：

        main div:nth-of-type(2) {
            background-color: red;
            float: right;
        }

状态转换

设置为浮动的元素都会变为inline-block状态。

如下所示，对一个inline标签进行浮动，它变的可以设置宽高了，对一个block标签进行浮动，它变的不会独占一行了：

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css_reset.css">
    <style>
        * {
            box-sizing: border-box;
        }

        main {
            width: 230px;
            padding: .5rem;
            border: 1px solid #000;
            /* 为了防止父盒子塌陷，所以这里给他定一个高度 */
            height: 200px;
        }

        main span,
        div {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }

        main span {
            float: left;
            border: 1px solid blue;
        }
        main div{
            float: right;
            background-color: red;
        }
    </style>
</head>

<body>
    <main>
        <span>inline</span>
        <div>block</div>
    </main>
</body>

</html>

浮动边界

父盒子中的浮动元素始终会位于父盒子的content区域中，不会超出padding区域。

如下所示：

content：蓝色
padding：绿色
margin：黄色

最低0.47元/天解锁文章

云崖先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3系列 09 浮动布局

浮动布局基本介绍浮动布局是CSS早期最常使用的一种布局方式。说白了就是使元素进行漂浮，从而脱离默认文档流排列的一种技术手段。使用浮动布局应该注意以下几点：浮动应当发生在一个大盒子内部（body标签也可以看做一个大盒子）浮动后的元素会影响后面未浮动元素的排列方式浮动元素会自动转换为inline-block状态浮动元素只会在父盒子的content区域，不会溢出到父盒子的padding区域当一个父盒子中所有的元素都进行浮动后，可能会造成父盒子高度塌陷的问题使用浮动对一个元素使用float
复制链接

扫一扫

专栏目录