关于前端学习的思考-浮动元素和块级元素的关系

先摆关系:浮动元素嵌套块级元素,浮动元素和块级元素是上下关系。

1、浮动元素为父盒子,块级元素为子盒子。

43003fdbfd074df6a00c9c850fbd8ca8.png

父盒子为浮动元素,子盒子不会继承。如图float=none;

摆结论:子盒子为行内元素,行内块元素和块级元素,子盒子都会随着父盒子移动。

2、块级元素为父盒子,浮动元素为子盒子。

6e4b790cc5d54e7cb9fdfa15203cce4f.png

20b8d0abd73d458cadd7404e8c5d6f1a.png

同理,又如上述两张图片,父标子浮的情况下,父盒子也会带着子盒子移动。

综上所述,父盒子会带着子盒子移动,浮动元素只会使得高度塌陷,例如子盒子为浮动元素,父盒子不会撑满,只有清除浮动,才能保留子盒子的高度,重新撑满父盒子。

清除浮动的两种方法

父级元素使用::after

浮动元素下方写一个div,并清除浮动。

3、浮动元素在上,块级元素在下。

如果浮动元素里面有图片和文字,会形成文字,图片环绕效果,先右弹,后左弹。

4、块级元素在上,浮动元素在下。

浮动元素不会影响前面的块级元素。

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

37.从0到上线三天搭建个人网站(第一天)

点赞收藏加关注,你也能住大别墅! 挑战三天搭建个人网站 从0到上线 一、项目的主要功能 1.作为自己在网上的一个工作室。 2.发帖 3.展示个人项目连接 4.介绍自己(没准儿还能接点活儿) 二、UI风格参考 三、技术选型 1.前端&a…

设计规则:模块化的力量

这是一本比较冷门的书**《设计规则:模块化的力量》**,虽然豆瓣上只有58个评价,但是确实能学到很多东西。 这本书对我非常深远。不是是投资,创业,还是其他领域,模块化思想都能帮上你。这本书告诉我们生万物…

数据结构中的二分查找(折半查找)

二分法:顾名思义,把问题一分为2的处理,是一种常见的搜索算法,用于在有序数组或这有序列表中查找指定元素的位置,它的思想是将待搜索的区间不断二分,然后比较目标值与中间元素的大小关系,然后确定…

第八天:信息打点-系统端口CDN负载均衡防火墙

信息打点-系统篇&端口扫描&CDN服务&负载均衡&WAF防火墙 一、知识点 1、获取网络信息-服务器厂商: 阿里云,腾讯云,机房内部等。 网络架构: 内外网环境。 2、获取服务信息-应用协议-内网资产: FTP…

OD机考真题搜集:矩阵中非1的元素个数

题目 存在一个m*n的二维数组,其成员取值范围为0,1,2。其中值为1的元素具备同化特性,每经过1S,将上下左右值为0的元素同化为1。而值为2的元素,免疫同化。将数组所有成员随机初始化为0或2,再将矩阵的[0,0]元素修改成1,在经过足够长的时间后求矩阵中有多少个元素是0或2(即…

芯片及设计制造 - 小记

文章目录 关于芯片制造材料 芯片分类ASICASSPSoCFPGA可编程SoC或SoC FPGA微处理器(μP 或 MPU)微控制器(μC 或 MCU) 芯片设计和制造过程:需求 & 方案架构设计架构验证形式验证/属性检查 前端设计RTL 设计逻辑综合…

Making Reconstruction-based Method Great Again for Video Anomaly Detection

Making Reconstruction-based Method Great Again for Video Anomaly Detection 文章信息: 发表于ICDM 2022(CCF B会议) 原文地址:https://arxiv.org/abs/2301.12048 代码地址:https://github.com/wyzjack/MRMGA4VAD…

Android : Handler -简单应用

主线程才能操作UI界面 实现子线程处理主线程UI MainActivity.java package com.example.myhandler;import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity;import android.annotation.SuppressLint; import android.os.Bundle; import andr…

layui提示框没有渲染bug解决

bug&#xff1a;使用layui时或许是依赖导入又或是ideal和浏览器缓存问题导致前面明明正常的页面显示&#xff0c;后面出现提示框没有css样式&#xff0c;弹出框没有背景css 效果如下 解决后 解决方法 在你的代码中引入layer.js 我这是jsp页面 <script type"text/jav…

Unity求向量A在平面L上的投影向量

如题&#xff1a;求向量A在平面L上的投影向量(图左) 即求 其实等价于求向量&#xff0c;那在中&#xff0c;,所以只需要求即可 而就是在平面L的法向量的投影坐标&#xff0c;所以代码就是 /// <summary>/// 求向量A在平面B上的投影向量/// </summary>/// <para…

Android关于杀掉进程的方案

《风波莫听穿林打叶声》—— 苏轼 〔宋代〕 三月七日&#xff0c;沙湖道中遇雨&#xff0c;雨具先去&#xff0c;同行皆狼狈&#xff0c;余独不觉。已而遂晴&#xff0c;故作此词。 莫听穿林打叶声&#xff0c;何妨吟啸且徐行。 竹杖芒鞋轻胜马&#xff0c;谁怕&#xff1f;一蓑…

记一篇Centos7安装innodb_ruby

安装innodb_ruby过程非常坎坷&#xff0c;这里记录下安装过程&#xff0c;有些坑当时没有记录下来&#xff0c;主要把完成安装过程就记录下来 yum安装ruby默认的会安装ruby2.0.0版本&#xff0c;但是在安装innodb_ruby时&#xff0c;会报错&#xff0c;提示至少需要2.4版本以上…

汽车标定技术(十)--从CPU角度观察Overlay实现原理

目录 1.问题引入 2.功能概述 2.1 P1X 标定功能 2.2 MPC57xx标定功能 2.3 TC3xx标定功能 3.问题分析 3.1 英飞凌CPU子系统猜想 3.2 ARM内核CPU子系统分析 4.小结 1.问题引入 在分析瑞萨RH850-P1x系列、NXP S32K3系列和英飞凌TC3xx系列对标定测量功能的实现时&#xf…

智能化质量控制,三坐标尺寸SPC管理系统引领制造新潮流!

在制造业的浪潮中&#xff0c;提升产品质量一直是企业不懈追求的目标。为了更好地适应市场需求、提高生产效益&#xff0c;我们自豪地介绍全新的三坐标尺寸SPC&#xff08;统计过程控制&#xff09;管理系统&#xff0c;为您的企业带来智能、高效的质量管理体验&#xff0c;助力…

顶级大厂Quora如何优化数据库性能?

Quora 的流量涉及大量阅读而非写入&#xff0c;一直致力于优化读和数据量而非写。 0 数据库负载的主要部分 读取数据量写入 1 优化读取 1.1 不同类型的读需要不同优化 ① 复杂查询&#xff0c;如连接、聚合等 在查询计数已成为问题的情况下&#xff0c;它们在另一个表中构…

TikTok革新挑战者:全球小众创作者的崛起

随着数字娱乐的快速发展&#xff0c;TikTok以其独特的短视频形式和开放的创作平台&#xff0c;成为全球范围内小众创作者崛起的推动者。本文将深入剖析TikTok在这一领域的革新&#xff0c;以及全球范围内小众创作者如何通过这一平台崭露头角。 TikTok&#xff1a;小众创作者的乐…

LeetCode刷题---斐波那契数列模型

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、第N个泰波那契数 题目链接&#xff1a;1137. 第 N 个泰波那契数 题目描述 泰波那契序列Tn定义如下: T00,T11,T2 1,且在n&g…

MySQL主从复制架构

MySQL主从复制架构 一、MySQL集群概述 ##1、集群的主要类型 高可用集群&#xff08;High Available Cluster&#xff0c;HA Cluster&#xff09; 高可用集群是指通过特殊的软件把独立的服务器连接起来&#xff0c;组成一个能够提供故障切换&#xff08;Fail Over&#xff09…

高项备考葵花宝典-项目范围管理输入、输出、工具和技术

项目范围管理包括确保项目“做”且“只做”所需的全部工作&#xff08;即不能少做&#xff0c;也不能多做&#xff0c;如果多做&#xff0c;就要消耗团队额外的时间和资源&#xff0c;并且无法被认可&#xff09;&#xff0c;以成功完成项目。项目范围管理主要在于定义和控制哪…

Angular项目中如何管理常量?

在Angular项目中&#xff0c;你可以使用不同的方式来管理常量。以下是一些常见的方法&#xff1a; 1、常量文件&#xff1a; 创建一个单独的 TypeScript 文件&#xff0c;其中包含你的常量。例如&#xff0c;创建一个名为 constants.ts 的文件&#xff0c;并在其中定义你的常量…