CSS基础-浮动

最新推荐文章于 2025-03-06 21:55:46 发布

fsj2009yx

最新推荐文章于 2025-03-06 21:55:46 发布

阅读量1.8k

点赞数 50

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/2301_79601341/article/details/143499828

版权

浮动

标准流/文档流

标准流：即标签按默认方式排列

块级元素独占一行，从上到下排列
行内元素按顺序从左到右排列，碰到父元素边缘自动换行

标准流是最基本的布局方式

浮动

浮动能改变标签默认的排列方式，如：

多个块级元素一行内排列

网页布局第一准则：多个块元素纵向排列找文档流，横向排列找浮动

float用于创建浮动框，将其移动到一边，直到左边框或右边框触及包含块或另一浮动框边缘

<body>
    <div class="container">
        <div class="float-left">左浮动元素</div>
        <div class="float-right">右浮动元素</div>
        <div class="clear"></div>
        <p>正常的文档流</p>
    </div>
    <style>
        .container {
            width: 400px;
            border: 1px solid #ccc;
            padding: 20px;
        }

        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }

        .float-right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: #0f0;
        }

        .clear {
            clear: both;
        }
    </style>
</body>

请添加图片描述

如何理解浮动：

设置float后，盒子脱离正常文档流（脱标），相当于上层图层
float会覆盖文档流元素，等同于图层叠加
浮动的盒子不再保留原先的位置，原文档流占位可以被正常文档流元素占有

浮动特性

如果多个盒子都设置了浮动（前提），它们会按照属性值在一行内排列：
浮动的元素是相互紧贴在一起的，如果父级元素的宽度装不下浮动盒子，溢出的盒子会另起一行排列
浮动元素具有行内块元素属性，可以直接设置宽高属性

浮动流元素经常和标准流父级搭配使用：

用标准流父级排列上下位置，内部子元素用float排列左右位置，因为浮动盒子是紧贴父级元素的边界排列，但不占用标准文档流

如果父元素内的一个子元素浮动了，理论上其他的兄弟元素都需要设置浮动

消除浮动

如果不清楚子元素的大小，理论上父级块状元素的宽高能随着子元素自动伸缩是最理想的
也就是子孩子有多高，父级元素就该有多高

为什么要清除浮动：

当父级元素不方便给固定高度时，如果子盒子都设置为浮动，而浮动流不占用文档流布局位置，会导致父级div的宽度为0，严重干扰文档流布局

如果父元素设置了高度，不需要清除浮动
如果未设置高度，清除浮动后父元素会依据浮动子盒子自动检测高度，不影响文档流

清除浮动的方法：

1.额外标签法，又称穿墙法

专门插入隔墙元素，隔墙元素是专门用于清除浮动元素后的影响的元素。代码如下：

<body>
    <div class="container">
        <div class="float-left">浮动元素</div>
        <div class="float-right">浮动元素</div>
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
    <style>
        .container {
            width: 800px;
            margin: 0 auto;
        }

        .float-left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #f00;
        }

        .float-right {
            float: right;
            width: 200px;
            height: 200px;
            background-color: #0f0;
        }

        .clear {
            clear: both;
        }

        .footer {
            height: 200px;
            background-color: #00f;
        }
    </style>
</body>

请添加图片描述

如上，class=clear的块级子元素专门用于清除浮动子元素的影响，使得下面的正常文档流能按序排列

如果没有这个空标签作为“隔墙”，浮动盒子会覆盖footer类属性的盒子

优点：通俗易懂，书写方便
缺点：添加了无意义标签，不易维护

2.父级元素添加overflow

将父级元素的overflow的属性值设为hidden，auto或scroll

优点：代码简洁
缺点：无法显示浮动盒子溢出的部分

<body>
    <div class="container">
        <div class="float-left">浮动元素</div>
        <div class="float-right">浮动元素</div>
    </div>
    <div class="footer"></div>
    <style>
        .container {
            width: 800px;
            margin: 0 auto;
            overflow: hidden;
        }

        .float-left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #f00;
        }

        .float-right {
            float: right;
            width: 200px;
            height: 200px;
            background-color: #0f0;
        }

        .footer {
            height: 200px;
            background-color: #00f;
        }
    </style>
</body>

3.添加after伪元素

<body>
    <div class="container clearfix">
        <div class="float-left">浮动元素</div>
        <div class="float-right">浮动元素</div>
    </div>
    <div class="footer"></div>
    <style>
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }

        .container {
            width: 800px;
            margin: 0 auto;
        }

        .float-left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #f00;
        }

        .float-right {
            float: right;
            width: 200px;
            height: 200px;
            background-color: #0f0;
        }

        .footer {
            height: 200px;
            background-color: #00f;
        }
    </style>
</body>

添加after伪元素的本质其实是隔墙法，创建了一个高度为0的container clearfix：:after块状元素

优点：结构简单
缺点：可能不兼容IE6，IE7浏览器

4.双伪元素

<body>
    <div class="container clearfix">
        <div class="float-left">浮动元素</div>
        <div class="float-right">浮动元素</div>
    </div>
    <div class="footer"></div>
    <style>
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .float-left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #f00;
        }

        .float-right {
            float: right;
            width: 200px;
            height: 200px;
            background-color: #0f0;
        }

        .footer {
            height: 200px;
            background-color: #00f;
        }
    </style>
</body>