当前位置: 首页 > news >正文

CSS清楚浮动

先看看关于浮动的一些性质

浮动使元素脱离文档流

浮动元素可以设置宽高,在CSS中,任何元素都可以浮动,浮动元素会生成一个块级框,而不论其本身是何种元素。

如果没有给浮动元素指定高度,,那么它会以内容的高度为自己的高度,并且尽可能的窄。

浮动的元素因为脱离了文档流,所以不能把父元素撑出高度。

浮动框脱离了文档流,所以文档里的其他普通的块框会表现得像浮动框不存在一样

浮动可以左移和右移,直到它的外边框碰到包裹它的框的边缘或是另一个浮动框为止

浮动多用于图片与文字的环绕处理,结合含有图片的div设置浮动,图片会浮动,而段落不浮动,效果是文字环绕图片。

浮动的影响

在这里插入图片描述

清楚浮动的方法

给父元素设置高度,(大于子元素)

在这里插入图片描述
但在网页设计中,我们一般都不会直接给父元素设置高度,而是采用由子元素撑开高度的方式来,所以由局限性。

2.给父元素添加 overflow:hidden|auto 属性。

overflow这里一共有三个属性,分别是auto|hidden|visible,可以使用auto或者hidden,但visible一定不能使用,达不到清除浮动的效果。

3.给同一级添加一个空标记,设置clear:both

.outer{color:white;border:1px solid blue;background:grey;margin:50px auto;}.div1{width:80px;height:80px;background:red;float:left;}.div2{width:80px;height:80px;background:purple;float:left;}.div3{width:80px;height:80px;background:green;float:left;}.null{clear: both;zoom:1;}

效果当然是去除了浮动
在这里插入图片描述

利用:after伪类,作用于父元素

.outer{color:white;border:1px solid blue;background:grey;margin:50px auto;zoom: 1;}.div1{width:80px;height:80px;background:red;float:left;}.div2{width:80px;height:80px;background:purple;float:left;}.div3{width:80px;height:80px;background:green;float:left;}.outer:after{content: ""; display:block;overflow:hidden;clear: both;}

浮动元素布局原理

浮动元素会根据属性值向左向右浮动,浮动元素会脱离普通文档流,进入浮动流。浮动流内的浮动元素可以左右移动,直至外边缘碰到包含块或其他浮动元素。会使得块级元素无视浮动元素且行内元素环绕浮动元素。

初始网页布局常见的有:标准流、浮动、定位。

标准流

简单来说就是普通流、常规流,占位;

浮动

从标准流中浮动出来,不占位

定位:

从标准流脱离出啦,不占位。

相关文章:

CSS清楚浮动

先看看关于浮动的一些性质 浮动使元素脱离文档流 浮动元素可以设置宽高,在CSS中,任何元素都可以浮动,浮动元素会生成一个块级框,而不论其本身是何种元素。 如果没有给浮动元素指定高度,,那么它会以内容的…...

HTTPS详解(原理、中间人攻击、CA流程)

摘要我们访问浏览器也经常可以看到https开头的网址,那么什么是https,什么是ca证书,认证流程怎样?这里一一介绍。原理https就是httpssl,即用http协议传输数据,数据用ssl/tls协议加密解密。具体流程如下图&am…...

EventLoop机制

JavaScript 是单线程的语言 JavaScript 是一门单线程执行的编程语言。也就是说,同一时间只能做一件事情。 单线程执行任务队列的问题: 如果前一个任务非常耗时,则后续的任务就不得不一直等待,从而导致程序假死的问题。 同步任…...

倒立摆建模

前言 系统由一辆具有动力的小车和安装在小车上的倒立摆组成,系统是不稳定,我们需要通过控制移动小车使得倒立摆保持平衡。 具体地,考虑二维情形如下图,控制力为水平力FFF,输出为角度θ\thetaθ以及小车的位置xxx。 力…...

SpringSecurity支持WebAuthn认证

WebAuthn是无密码身份验证技术,解决了密码泄露的风险,主流的浏览器都支持。有很多开源的类库实现了WebAuthn规范,Java下流行的类库有:webauthn4jjava-webauthn-serververtx-authSpring Security官方暂时未支持WebAuthn&#xff0c…...

深度学习技巧应用3-神经网络中的超参数搜索

大家好,我是微学AI,今天给大家带来深度学习技巧应用3-神经网络中的超参数搜索。 在深度学习任务中,一个算法模型的性能往往受到很多超参数的影响。超参数是指在模型训练之前需要我们手动设定的参数,例如:学习率、正则…...

【信号量机制及应用】

水善利万物而不争,处众人之所恶,故几于道💦 目录 一、信号量机制 二、信号量的应用 >利用信号量实现进程互斥   >利用信号量实现前驱关系   >利用记录型信号量实现同步 三、例题 四、参考 一、信号量机制 信号量是操作系统提…...

围棋高手郭广昌的“假眼”棋局

(图片来源于网络,侵删)文丨熔财经作者|易不二2022年,在复星深陷债务压顶和变卖资产漩涡的而立之年,“消失”已久的郭广昌,在质疑与非议声中回国稳定军心,强调复星将在未来的五到十年迎来一个全新…...

学成教育-统一异常处理实现

一、统一异常处理实现 统一在base基础工程实现统一异常处理&#xff0c;各模块依赖了base基础工程都 可以使用。 首先在base基础工程添加需要依赖的包&#xff1a; <dependency><groupId>org.springframework</groupId><artifactId>spring-web</…...

JNI内通过参数形式从C/C++中传递string类型数据至Java层

目录 0 前言 1 string类型参数形式传值 2 测试和结果 0 前言 类似之前我写过的两篇文章&#xff1a;一篇介绍了在JNI中基础类型int的传值方式&#xff1b;一篇详细梳理了在JNI层中多维数组的多种传值方式。 JNI内两种方式从C/C中传递一维、二维、三维数组数据至Java层详细…...

自动化测试——执行javaScript脚本

文章目录一、点击元素(对应的click())二、input标签对应的值&#xff08;对应的send_keys()&#xff09;修改时间控件的属性值&#xff1a;三、元素的文本属性四、js脚本滚动操作一、点击元素(对应的click()) 使用场景&#xff1a;当使用显性等待不能解决问题时 代码中实现点击…...

常用十种算法滤波

十种算法滤波1. 限幅滤波法&#xff08;又称程序判断滤波法&#xff09;2. 中位值滤波法3. 算术平均滤波法4. 递推平均滤波法&#xff08;又称滑动平均滤波法&#xff09;5. 中位值平均滤波法&#xff08;又称防脉冲干扰平均滤波法&#xff09;6. 限幅平均滤波法7. 一阶滞后滤波…...

IO多路复用

一、概述 IO多路复用&#xff1a;进程同时检查多个文件描述符&#xff0c;以找出他们中的任何一个是否可执行IO操作。 核心&#xff1a;同时检查多个文件描述符&#xff0c;看他们是否准备好了执行IO操作。文件描述符就绪状态的转化是通过一些IO事件来触发。 二、水平触发和…...

Python中的错误是什么,Python中有哪些错误

7.1 错误(errors) 由于Python代码通常是人类编写的&#xff0c;那么无论代码是在解释之前还是运行之后&#xff0c;或多或少总会出现一些问题。 在Python代码解释时遇到的问题称为错误&#xff0c;通常是语法和缩进问题导致的&#xff0c;这些错误会导致代码无法通过解释器的解…...

记录自己开发一款小程序中所遇到的问题(uniapp+uview)(持续更新)

每次开发小程序中&#xff0c;都会遇到各种各样的问题。但是有的问题已经遇到过了&#xff0c;但是遇到的时候还是要各种的问度娘。 特此出这篇文章&#xff0c;方便自己也是方便大家。 仅供参考 1. u-collapse的样式在h5中正常&#xff0c;但是运行到微信小程序中样式就乱了…...

华为机试 HJ43 迷宫问题

经典迷宫问题dfs 题目链接 描述 定义一个二维数组 N*M &#xff0c;如 5 5 数组下所示&#xff1a; int maze[5][5] { 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, }; 它表示一个迷宫&#xff0c;其中的1表示墙壁&#xff0c;0表示可以走…...

数据结构|链表

概念&#xff1a;链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的 。单链表的形式就像一条铁链环环相扣它与顺序表最大的不同是&#xff0c;单链表的数据存储是在不连续的空间&#xff0c;存储的数据里面含有…...

计算机写论文时,怎么引用文献? - 易智编译EaseEditing

首先需要清楚哪些引用必须注明[1]&#xff1a; 任何直接引用都要用引号并注明来源&#xff1b; 任何不是自己的口头或书面的观点、解释和结论都应注明来源&#xff1b; 即使不用原话&#xff0c;但是他人的思路、概念或观点也应注明&#xff1b; 不要为了适合你的观点修改原…...

实验三:贪心

1.减肥的小k1 题目描述 小K没事干&#xff0c;他要搬砖头&#xff0c;为了达到较好的减肥效果&#xff0c;教练规定的方式很特别&#xff1a; 每一次&#xff0c;小K可以把两堆砖头合并到一起&#xff0c;消耗的体力等于两堆砖头的重量之和。 经过 n-1次合并后&#xff0c; …...

MySQL日志文件

文章目录1.MySQL中的日志文件2.bin log的作用3.redo log的作用4.bin log和redo log的区别&#xff08;1&#xff09;存储的内容&#xff08;2&#xff09;功能&#xff08;3&#xff09;写入时间&#xff08;4&#xff09;写入方式5.两阶段提交6.undo log的作用1.MySQL中的日志…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...