百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

CSS 浮动(float) 宝妈级教程 通俗易懂

zhezhongyun 2025-05-27 19:14 6 浏览

标准流


标签按照规定好的默认方式排序

块级元素独占一行 从上向下顺序排列

div hr p h1-h6 ul ol form table


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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 300px;
            background-color: #c5708b;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>




为什么需要浮动嘞?



很多的布局效果,标准流没有办法完成,就需要利用到浮动完成布局.


浮动可以改变元素标签默认的排列方式


网页布局第一准则:


多个块级元素纵向排列找标准流


多个块级元素横向排列找浮动




什么是浮动?


float 属性用于创建浮动框

将其移动到一边,直到左边缘或者右边缘及包含块或者另一个浮动框的边缘



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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            /* left 左浮动 right 右浮动 none 不浮动(默认) */
            float: left;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>




浮动特性



1.脱离标准普通流的控制移动到指定位置 脱标


2.浮动的盒子不再保留原先的位置


3.多个盒子都设置浮动,按照属性值一行并排顶端对齐排列(不会有缝隙,多出另起一行对齐)


4.浮动元素会具有行内块元素特性(任何元素都可浮动)


  • 如果块级盒子没有设置宽度,默认宽度和父级一样宽,添加浮动后,大小由内容决定
  • 行内元素同理


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



实战小技巧


  • 为了约束浮动元素位置,网页布局一般采用的策略:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置



清除浮动


为什么要清除浮动?



由于父级盒子很多情况下,不方便给高度,但是的盒子浮动又不占位置,最后父级盒子高度为0时,就会影响下面的标准流盒子.


1.父级没有高度


2.子盒子浮动了


3.影响下面布局




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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid #000;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>



清除浮动方法



清除浮动本质:


清除浮动元素脱离标准流造成的影响


清除浮动策略:


闭合浮动,只让浮动在父盒子内影响,不影响父盒子外面的其他盒子




1. 父级添加overflow 属性值设置hidden auto scroll 



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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>



弊端:无法显示溢出的部分


父盒子 500px 子盒子 600px (子盒子的100px被隐藏)



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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 600px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>



2.:after 伪元素法 



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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
        }

        div .child {
            color: bisque;
            width: 240px;
            background-color: #c5708b;
            float: left;
        }

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

        .clearfix {
            /* IE 6,7专有 解决兼容性问题 */
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>



3.双伪元素清除浮动 



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

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
        }

        div .child {
            color: bisque;
            width: 240px;
            background-color: #c5708b;
            float: left;
        }

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

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /* IE 6,7专有 解决兼容性问题 */
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>



相关推荐

「教程」5 分钟带你入门 kivy

原创：星安果AirPythonkivy语言通过编写界面UI，然后利用Python定义一些业务逻辑，可以移植很多功能模块到移动端直接执行。下面对kivy常见用法做一个汇总。1、什么是...

【HarmonyOS Next之旅】基于ArkTS开发(二) -＞ UI开发三

目录1->绘制图形1.1->绘制基本几何图形1.2->绘制自定义几何图形2->添加动画效果2.1->animateTo实现闪屏动画2.2->...

Python设置excel表格格式，这3个属性6个模块，要表格好看

前言：通过前面两篇文章，我们用Python处理excel数据得到了结果并保存了文件。打开文件会发现，文件里表格是没有设置格式的，还需手动调整行高列宽等样式，很麻烦。其实，通过Python库模块，能轻松...

鸿蒙开发(三十三):Column

Column是一个沿垂直方向布局的容器。例如：@Entry@ComponentexportstructIndex{build(){Column(){Tex...

实战 | 如何制作数据报表并实现自动化?

本章给大家演示一下在实际工作中如何结合Pandas库和openpyxl库来自动化生成报表。假设我们现在有如图1所示的数据集。（图1）现在需要根据这份数据集来制作每天的日报情况，主要包含以下...

C# 给Word每一页设置不同图片水印

Word中设置水印时，可加载图片设置为水印效果，但通常添加水印效果时，会对所有页面都设置成统一效果，如果需要对每一页或者某个页面设置不同的水印效果，则可以参考本文中的方法。下面，将以C#代码为例，对W...

Inkscape 教程:创建棒球缝线效果

本教程将演示如何使用Inkscape中的PatternAlongPath路径效果来创建棒球上的缝线。基本原理是先创建一个代表单个缝线元素的图形（包括缝线本身和其下方的模拟孔洞），然后创建一...

ArkUI-Text/Span 详解

ArkUI-Text/Span详解@Entry@ComponentstructTextDemo{build(){Column({space:16}){Te...

【HarmonyOS Next之旅】兼容JS的类Web开发(五) -＞ Svg

目录1->基础知识1.1->创建Svg组件1.2->设置属性2->绘制图形3->绘制路径4->绘制文本4.1->文本4.2-&g...

Android常用布局总结之(LinearLayout、GridLayout等4种)

一、LinearLayout线性布局LinearLayout是一个视图组，用于使所有子视图在单个方向（垂直或水平）保持对齐。您可以使用android:orientation属性指定布局方向。a...

Excel vba常用语句

以下是常用的30个ExcelVBA语句：1.Range("A1").Value="HelloWorld"'将单元格A1的值设置为"Hello...

C#导出excel复杂表格(单元各合并)

一、效果展示二、代码实现引用dllusing Aspose.Cells;DataTable数据保存到Excel/// <summary>/// DataTa...

Excel-VBA代码，合并单元格

要求：合并第三列相同商品的单元格。vba合并单元格代码，代码运行如下。代码分享如下：Sub合并单元格()Dimi%'声明变量Application.DisplayAlerts=Fal...

MFC转QT:Qt高级特性 - 模型/视图架构

模型/视图架构概述Qt的模型/视图架构是一种设计模式实现，用于将数据存储与数据显示分离开来。这种设计与MFC的文档/视图架构有相似之处，但更加灵活和强大。它是Qt区别于MFC的最重要特性之一，能大幅提...

Excel单工作表拆分成多个工作表，掌握这个技能工作效率提升10倍

在我们的工作当中，常常会遇到这样的工作场景，我们需要将一个汇总的工作表按照某列的字段拆分为多个工作表。按照惯例，我们还是通过实际的一个例子来给大家进行形象的讲解吧。下面为某学校高一年级的成绩汇总表，我...

一周热门
最近发表
标签列表