浮动（float）

HHppGo

于 2024-09-02 00:24:58 发布

阅读量686

点赞数 10

分类专栏： CSS 前端开发文章标签： css float 浮动

本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。

本文链接：https://blog.csdn.net/asacmxjc/article/details/141758547

版权

前端开发同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

传统网页布局方式：

标准流
浮动
定位

在这里插入图片描述

用浮动才能解决的问题

1.如何让多个块级盒子（div）排成一行，且控制中间缝隙大小？

在这里插入图片描述

2.如何实现两个盒子的左右对齐？

在这里插入图片描述
注意：❤️ ❤️ ❤️ ❤️ ❤️

浮动最典型的应用：可以让多个块级元素一行内排列显示；
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

什么是浮动？

在这里插入图片描述

浮动的特性

在这里插入图片描述

设置浮动后，盒子会脱标，不再保留原来位置

在这里插入图片描述

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

在这里插入图片描述

浮动元素会具有行内块元素特性

在这里插入图片描述

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

在这里插入图片描述

浮动布局练习

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动元素搭配标准流父盒子2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }

        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }

        /* 这里必须写 .box .last 要注意权重的问题  20 */
        .box .last {
            /* 去除最后一个小盒子的右侧外边距，才能在一行上显示 */
            margin-right: 0;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>

</html>

常见布局

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>常见网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            margin: 0 auto;
            height: 300px;
            background-color: pink;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0;
        }

        /* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

</html>

浮动布局注意点

1.浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置；

2.一个元素浮动了，理论上其余的兄弟元素也要浮动

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

为什么要清除浮动

父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了

在这里插入图片描述
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的策略

在这里插入图片描述

清除浮动方法

1.额外标签法也称为隔墙法，是W3C推荐的做法；
2. 父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素

（1）额外标签法

在这里插入图片描述

（2）父级添加overflow

在这里插入图片描述

（3）父级添加 :after伪元素

步骤1：在style样式中添加如下代码：

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

步骤2：修改父盒子代码，在类名中，添加clearfix（此处不是固定的，只是与样式中的类名统一，但默认都这么写）
在这里插入图片描述

（4）父级添加双伪元素

在这里插入图片描述

步骤1：在style样式中添加如下代码：

 		.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }