css浮动布局详解

最新推荐文章于 2024-03-21 19:18:07 发布

XINGAO丨

最新推荐文章于 2024-03-21 19:18:07 发布

阅读量360

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_44749729/article/details/108377293

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

概念

浮动布局简介:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。

优点

类似于inline-block
区别：
第一个：就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；
第二个：就是inline-block在使用时有时会有空白间隙的问题

缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素的高度塌陷

解决清除浮动

添加额外标签

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <div class="a">aaaa</div>
        <div class="b">bbbb</div>
        <div style="clear: both;"></div>
    </div>
</body>
<style>
    #app {
        position: relative;
        /* width: 400px; */
        /* height: 400px; */
        background-color:khaki;
    }

    .a {
        background-color: cornsilk;
        float: left;
    }
    .b{
        background-color:lavenderblush ;
        float: right;
    }
</style>

</html>

父级添加overflow属性，或者设置高度

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <div class="a">aaaa</div>
        <div class="b">bbbb</div>
    </div>
</body>
<style>
    #app {
        position: relative;
        /* width: 400px; */
        /* height: 400px; */
        background-color:khaki;
        overflow: hidden;
    }

    .a {
        background-color: cornsilk;
        float: left;
    }
    .b{
        background-color:lavenderblush ;
        float: right;
    }
</style>

</html>

建立伪类选择器清除浮动（推荐）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <div class="a">aaaa</div>
        <div class="b">bbbb</div>
    </div>
</body>
<style>
    #app {
        position: relative;
        /* width: 400px; */
        /* height: 400px; */
        background-color: khaki;
    }

    .a {
        background-color: cornsilk;
        float: left;
    }

    .b {
        background-color: lavenderblush;
        float: right;
    }

    #app::after {
        /* 设置添加子元素的内容是空 */
        content: '';
        /* 设置添加子元素为块级元素 */
        display: block;
        /* 设置添加的子元素的高度0 */
        /* height: 0; */
        /* 设置添加子元素看不见 */
        /* visibility: hidden; */
        /* 设置clear：both */
        clear: both;
    }
</style>

</html>

XINGAO丨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css浮动布局详解

概念浮动布局简介:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。优点类似于inline-block区别：第一个：就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；第二个：就是inline-block在使用时有时会有空白间隙的问题缺点最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素的高度塌陷解决
复制链接

扫一扫