css浮动（为什么要清除浮动？清除浮动有哪几种方式？）

news2024/12/23 9:01:11

为什么要清除浮动？

清除·浮动主要是为了清除浮动元素造成的影响，使浮动元素不会影响其后元素的布局

  • 防止父元素高度塌陷：当元素浮动后，它会脱离一个标准文档流，不再占用原先的布局空间。如果一个父元素内只有浮动元素，那么该父元素的高度会塌陷为0。清除浮动可以解决这个问题，使父元素根据浮动元素的高度自动扩展高度。
  • 防止浮动元素覆盖后续元素：当元素浮动后，后续元素会忽略它并填补其原先的空间。这可能导致浮动元素覆盖后续元素，影响页面布局。清除浮动可以解决这个问题，保证浮动元素不会影响后续元素的布局。
  • 方便给浮动元素添加边距：当元素浮动后，它的外边距不会影响其后元素的布局。如果不清除浮动，添加边距只会使浮动元素覆盖更大的区域，而不会真正创建边距空间。清除浮动可以使外边距生效，真正产生边距效果。
  • 使浮动布局更加可控：通过清除浮动，可以很好地解决浮动布局带来的各种问题，使浮动元素不会对布局产生意想不到的影响。这使得浮动布局变得更加可控。

清除浮动有哪几种方式？

  • 清除浮动元素后的第一个块级元素添加clear属性，值为浮动方向（left、right、both）。这会强制该元素不允许浮动元素影响其布局。
  • 父元素添加overflow属性，值为hidden或auto。这会创建一个BFC（块级格式化上下文），内部的浮动元素不会影响外部元素。
  • 父元素添加after伪元素，并设置clear属性。这会向父元素添加一个清除浮动的元素。
  • 父元素手动添加高度（不推荐）

演示

1.（1）因为浮动，p元素和两个child元素仿佛同在第一行

image-20230815224047974

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            height: 300px;
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <p>我是p元素</p>
    </div>
</body>
</html>

（2）p元素添加clear属性

image-20230815224021901

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            height: 300px;
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <p>我是p元素</p>
    </div>
</body>
</html>

2.（1）父元素高度塌陷

image-20230815224223632

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            /* height: 300px; */
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <!-- <p>我是p元素</p> -->
    </div>
</body>
</html>

（2）解决方式

image-20230815224449708

  • 方式一：清除浮动元素后的第一个块级元素添加clear属性，值为浮动方向
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            /* height: 300px; */
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <!-- <p>我是p元素</p> -->
        <div class="clear"></div>
    </div>
</body>
</html>
  • 方式二：父元素添加after伪元素，并设置clear属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            /* height: 300px; */
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
        /* .clear {
            clear: both;
        } */
        /* 伪元素默认是行元素 */
        #main::after {
            content: "";
            /* block clear:both才会生效 */
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
        <!-- <p>我是p元素</p> -->
        <div class="clear"></div>
    </div>
</body>
</html>

image-20230815225707305

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 500px;
            /* height: 300px; */
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
        /* .clear {
            clear: both;
        } */
        /* 伪元素默认是行元素 */
        #main::after {
            content: "";
            /* block clear:both才会生效 */
            display: block;
            clear: both;
        }
        #main2 {
            background: #000000;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
    <div id="main2">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>
</html>

image-20230815225944349

父元素添加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>
    <style>
        #main {
            width: 500px;
            /* height: 300px; */
            background: #cccccc;
        }
        #child1 {
            width: 100px;
            height: 100px;
            background: #f000f0;
            /* 脱离文档流，空间释放 */
            float: right;
        }
        #child2 {
            width: 100px;
            height: 100px;
            background: #0000ff;
            float: right;
        }
        p {
            background: yellow;
            /* 为块级元素添加clear属性 */
            clear: right;
        }
        /* .clear {
            clear: both;
        } */
        /* 伪元素默认是行元素 */
        #main::after {
            content: "";
            /* block clear:both才会生效 */
            display: block;
            clear: both;
        }
        #main2 {
            background: #000000;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
    <div id="main2">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/882715.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SpringBoot中优雅的实现隐私数据脱敏（提供Gitee源码）

SpringBoot中优雅的实现隐私数据脱敏（提供Gitee源码）

前言&#xff1a;在实际项目开发中&#xff0c;可能会对一些用户的隐私信息进行脱敏操作&#xff0c;传统的方式很多都是用replace方法进行手动替换&#xff0c;这样会由很多冗余的代码并且后续也不好维护&#xff0c;本期就讲解一下如何在SpringBoot中优雅的通过序列化的方式去…
阅读更多...
07 线程学习

07 线程学习

一 qt线程角色 子线程完成与UI线程无关的工作，并且能够保持与UI线程通信 二 qt中线程 在QT中，对于 线程操作也是提供类(QThread)来进行封装，然后再学习该类的API接口 参数用途Header:#include qmake:QT += coreInherits:QObject //继承于QObject从官方文档可以看出，如果一…
阅读更多...
每天一道leetcode：797. 所有可能的路径（图论中等深度优先遍历）

每天一道leetcode：797. 所有可能的路径（图论中等深度优先遍历）

今日份题目&#xff1a; 给你一个有 n 个节点的 有向无环图&#xff08;DAG&#xff09;&#xff0c;请你找出所有从节点 0 到节点 n-1 的路径并输出&#xff08;不要求按特定顺序&#xff09; graph[i] 是一个从节点 i 可以访问的所有节点的列表&#xff08;即从节点 i 到节…
阅读更多...
[论文笔记]Glancing Transformer for Non-Autoregressive Neural Machine Translation

[论文笔记]Glancing Transformer for Non-Autoregressive Neural Machine Translation

引言 这是论文Glancing Transformer for Non-Autoregressive Neural Machine Translation的笔记。 传统的非自回归文本生成速度较慢，因为需要给定之前的token来预测下一个token。但自回归模型虽然效率高，但性能没那么好。 这篇论文提出了Glancing Transformer，可以只需要一…
阅读更多...
Verdi_traceX and autotrace

Verdi_traceX and autotrace

Verdi_traceX and autotrace Trace X From nWave/nTrace of from the Teporal Flow View. Show Paths on Flow ViewShow Paths on nWave 若Waveform中有X态&#xff0c;鼠标右键会有Trace X的选项&#xff1b; 会自动打开Temporal Flow View窗口&#xff0c;展示对应路径&am…
阅读更多...
我的创作纪念日 — 嵌入式up（2023.8.15）

我的创作纪念日 — 嵌入式up（2023.8.15）

机缘 在2022年8月15日&#xff0c;开始了CSDN文章的编写&#xff0c;最初只想做一个知识的积累&#xff0c;毕竟对一个电子发烧友来说&#xff0c;很多东西都是迭代很快&#xff0c;且玩的次数不会很多&#xff0c;有些问题和一些解决方法&#xff0c;最好记录下来&#xff0c;…
阅读更多...
分类预测 | MATLAB实现EVO-CNN多输入分类预测

分类预测 | MATLAB实现EVO-CNN多输入分类预测

分类预测 | MATLAB实现EVO-CNN多输入分类预测 目录 分类预测 | MATLAB实现EVO-CNN多输入分类预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现EVO-CNN多输入分类预测 2.代码说明&#xff1a;量谷优化卷积神经网络的数据分类预测&#xff1a;要求于Matlab …
阅读更多...
杭电多校 Shortest path 记忆化搜索

杭电多校 Shortest path 记忆化搜索

&#x1f468;‍&#x1f3eb; Shortest path 输入 4 7 114514 1919810 2147483648输出 3 19 20 31&#x1f351; 思路&#xff1a;用操作3 凑出 操作1 操作2 的前提条件&#xff0c;暴搜记忆化搜索 import java.io.*; import java.util.*;public class Main {static Buffer…
阅读更多...
linux中的/dev/null

linux中的/dev/null

1.什么是/dev 在 Linux 上&#xff0c;从驱动程序到设备的所有内容都可以作为文件进行访问。/dev/ 是包含所有物理和虚拟设备的目录。例如&#xff0c;/dev/sda 可能是您的主硬盘驱动器&#xff0c;/dev/sdb 可能是您现在正在使用的笔记本驱动器的文件。这就是您在 Linux 中访问…
阅读更多...
华为OD机试-考勤信息

华为OD机试-考勤信息

代码实现 # coding: utf-8 import numpyclass Solution:def chuqinInfo(self, n, arrs):res []for i in range(n):arr arrs[i]count 0for s in arr:if str(s) absent:count 1if count > 1:res.append(False)continuefor i in range(len(arr) - 1):a arr[i]b arr[i …
阅读更多...
前端技术栈es6+promise

前端技术栈es6+promise

let入门使用、 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>let 基本使用</title><script type"text/javascript">let name "hspedu教育";//老韩解读//1. conso…
阅读更多...
字符函数、数值函数、日期时间函数、聚集函数、判断函数、运算符号、排序、分组、过滤、分页、插入表记录、更新表记录、删除表记录

字符函数、数值函数、日期时间函数、聚集函数、判断函数、运算符号、排序、分组、过滤、分页、插入表记录、更新表记录、删除表记录

Top NSD DBA DAY02 案例1&#xff1a;常用函数案例2&#xff1a;查询结果处理案例3&#xff1a;管理表记录 1 案例1&#xff1a;常用函数 1.1 问题 练习字符函数练习数学函数练习日期函数练习聚集函数练习数学计算练习if函数练习case函数 1.2 方案 函数&#xff1a;MySQL…
阅读更多...
将树莓派转身为强大的Web服务器：使用Nginx和cpolar实现远程访问

将树莓派转身为强大的Web服务器：使用Nginx和cpolar实现远程访问

文章目录 1. Nginx安装2. 安装cpolar3.配置域名访问Nginx4. 固定域名访问5. 配置静态站点 安装 Nginx&#xff08;发音为“engine-x”&#xff09;可以将您的树莓派变成一个强大的 Web 服务器&#xff0c;可以用于托管网站或 Web 应用程序。相比其他 Web 服务器&#xff0c;Ngi…
阅读更多...
【Python】使用python解析普通格式的报文为someip格式报文

【Python】使用python解析普通格式的报文为someip格式报文

文章目录 1.安装scapy库2.示例 1.安装scapy库 使用 pip 安装 scapy 第三方库&#xff0c;打开 cmd&#xff0c;输入以下命令&#xff1a; pip install scapy出现如图所示&#xff0c;表示安装成功&#xff1a; 2.示例 要解析someip格式报文&#xff0c;需要导入someip模块&a…
阅读更多...
《Rethinking the Expressive Power of GNNs via Graph Biconnectivity》阅读笔记

《Rethinking the Expressive Power of GNNs via Graph Biconnectivity》阅读笔记

一.文章概述 现如今存在许多工作探索GNN的表达能力&#xff0c;然而对于其中大多数方法&#xff0c;仍然缺乏对它们可以系统地和可证明地获取哪些额外表达力的深刻理解。在本文中&#xff0c;作者通过图双连通性&#xff08;biconnectivity&#xff09;引入一类新的表达能力度…
阅读更多...
Java并发编程（七）实践[生产者-消费者]

Java并发编程（七）实践[生产者-消费者]

生产者-消费者 概述 生产者消费者问题&#xff0c;也称有限缓冲问题&#xff0c;是一个多线程同步问题的经典案例。该问题描述了共享固定大小缓冲区的两个线程在多线程开发中,如果生产者(生产数据的线程)处理速度很快,而消费者(消费数据的线程)处理速度很慢,那么生产者就必须…
阅读更多...
CMake生成的VS项目之后运行弹出错误框：无法启动...\Debug\~.exe，找不到指定的文件夹

CMake生成的VS项目之后运行弹出错误框：无法启动...\Debug\~.exe，找不到指定的文件夹

问题&#xff1a; CMake生成的VS项目之后运行弹出错误框&#xff1a;无法启动…\Debug~.exe&#xff0c;找不到指定的文件夹 首先确实Debug文件夹中没有.exe文件 问题的根本是项目缺东西&#xff0c;有问题&#xff0c;当所有问题解决了&#xff0c;也就不会出现这个问题的&am…
阅读更多...
【Mariadb高可用MHA】

【Mariadb高可用MHA】

目录 一、概述 1.概念 2.组成 3.特点 4.工作原理 二、案例介绍 1.192.168.42.3 2.192.168.42.4 3.192.168.42.5 4.192.168.42.6 三、实际构建MHA 1.ssh免密登录 1.1 所有节点配置hosts 1.2 192.168.42.3 1.3 192.168.42.4 1.4 192.168.42.5 1.5 192.168.42.6 …
阅读更多...
02-C++数据类型-高级

02-C++数据类型-高级

数据类型-高级 4、复合类型 4.4、结构简介 struct inflatable {char name[20];float vol;double price; };inflatable vincent; //C struct inflatable goose; //C例子 // structur.cpp -- a simple structure #include <iostream> struct inflatable // structu…
阅读更多...
【数据库系统】--【2】DBMS架构

【数据库系统】--【2】DBMS架构

DBMS架构 01DBMS架构概述02 DBMS的物理架构03 DBMS的运行和数据架构DBMS的运行架构DBMS的数据架构PostgreSQL的体系结构RMDB的运行架构 04DBMS的逻辑和开发架构DBMS的层次结构DBMS的开发架构DBMS的代码架构 05小结 01DBMS架构概述 02 DBMS的物理架构 数据库系统的体系结构 数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023