【前端】CSS页面布局 | float浮动布局

带你玩透浮动float布局,详解(一) 如果一个元素浮动,另一个浮动元素已经在那个位置了,后浮动的元素将紧贴着前一个浮动元素(左浮找左浮,右浮找右浮)这会出现代码的阅读量挺差,如果开发需要写很多复杂的东西你讲代码写成一行,后期也不能很好的去维护!如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动,直到有充足的空间为止。如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动,直到有充足的空间为止。如果元素是向左(右)浮动,浮动元素的左(右)边界不能超出包含块的左(右)边界。浮动元素不能与行内级内容层叠,行内级内容将会被浮动元素推出。 阅读详情

float浮动布局

float

float 只能在父级元素中浮动!!

浮动就像排队一样
float元素可以像块级一样通过width height设置宽和高,也可以像行内元素一样并列在一行
可以设置left right 让元素像左/向右贴紧父容器边界/排在前面的元素

float: left;
float: right;

当容器中有部分设置了浮动元素,部分是普通元素。
浮动元素不会占用普通元素的空间,更像是分出了一层在上方,会遮挡住普通元素
在这里插入图片描述

但是普通文档流中的文本节点会识别到他们,并避开他们

在这里插入图片描述

三列布局

两边固定,中间自适应

在这里插入图片描述

A:固定宽高,左浮动

B:固定宽高,右浮动

C:作为普通文档流在中间,并设置内外边距

图片来源于网络

【高频考点精讲】CSS浮动布局的替代方案:为什么现代前端已经很少用float了? 🧑‍🏫:全栈老李📅:2025 年 5 月🧑‍💻:前端初学者、进阶开发者🚀:本文由全栈老李原创,转载请注明出处。大家好,我是全栈老李。今天咱们聊聊一个让很多新手前端困惑的问题——为什么现在很少看到float布局了?这玩意儿当年可是红极一时啊!记得我刚入行那会儿,float简直就是前端布局的"万金油"。那时候做个两栏布局,不加个都不好意思说自己会CSS。但如今打开GitHub看看主流项目,float的身影已经越来越少了。这中间到底发生了什么?让我们一探究竟。 阅读详情

相关推荐

css零到一中级教程005:CSS 布局 - 浮动和清除

CSS 布局 - 浮动和清除 CSSfloat属性规定元素如何浮动。 CSSclear属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。 float 属性 float 属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。 float 属性可以设置以下值之一: left - 元素浮动到其容器的左侧 right - 元素浮动在其容器的右侧 none - 元素不会浮动(将显示在文本中刚出现的位置)。默认值。 inherit - 元素继承其父级的 float 值 ...

kerryqpw的博客 225

【前端-初阶】CSS浮动

【前端-初阶】CSS浮动

qq_48234463的博客 620

EZ-USB-FX3 slavefifo调试

最近使用fx3-usb-3.0调试slave fifo的传输,期间遇到许多难以理解的问题。在这里分享给大家,希望可以少走一些弯路,我自己是这样走过来的。 1,首先去官网下载原始的参考设计,并安装所提供的SDK软件:FX3SDKSetup_1.3.4.exe 2,接着把参考设计文档AN65974阅读一遍,分别创建新的SDK工程和FPGA工程。如果使用的原厂的开发板,那么可以按照文档提示,可以很顺畅的跑完整过测试。否则需要匹配自己的硬件,做针对性的更改和移植,而我走的是后一条路,于是开始了漫长的调试之路。.

YDY5659150的专栏 3631

css的浮动和定位

定位是一种更为精确地控制元素位置的技术,通过设置元素的position属性为relative,absolute,fixed,或stickly,可以改变元素在文档流中的定位方式。

gfvghkfvkuhhkug的博客 555

Linux-VMware安装后没有虚拟网卡VMnet1和VMnet8(亲测有效,一步一步跟着绝对成功)

VMware-安装后没有虚拟网卡VMnet1和VMnet8 就这个破东西我昨天弄了一天,网上什么VMware卸载重装,用CCleaner清理注册表什么的操作我全用了,但是昨天就是弄不好,同样的操作我昨天试了无数遍一直觉得可能是 持续更新中… 文章参考学习地址:https://blog.youkuaiyun.com/qq_42445139/article/details/87872130 ...

杨的博客 8852

电力电子技术进阶:从基础到实战的完整学习路径

本文系统阐述了电力电子技术从基础到实战的完整学习路径。首先解析了电力电子作为“电能魔术师”的核心作用,随后深入剖析了数学工具、电路电磁场与半导体器件三大基础支柱。文章重点讲解了DC-DC、DC-AC、AC-DC等核心变换拓扑,并探讨了从经典PID到现代模型预测控制(MPC)的控制策略。最后,分享了硬件设计、软件调试、电磁兼容(EMC)等实战经验与前沿趋势,为学习者提供了清晰的进阶指南。

weixin_29204205的博客 447

Float和Flex布局

深入学习Flex布局和Float布局

xrkhy的博客 1491

2021秋招IC验证面经-ARM中国/中科芯/飞腾/地平线/中兴

中科芯 (央企福利待遇好,但是百分百不解决户口,适合当地人进去躺平。) 现场面试,三个面试官,时间大约40min 首先介绍一下自己,介绍一下项目。所做项目用到了FIFO吗,深度是多少,位宽是多少,仲裁算法是什么? 验证环境中的reference model是自己写的还是本身就有的,仲裁怎么在参考模型中实现,参考模型怎么获取寄存器的值? 怎么配置RTL寄存器,通过平台的寄存器模型进行寄存器配置,寄存器模型里边的方法,写一个寄存器或读一个寄存器怎么实现? 寄存器如何实现前门访问和后门访问,后门访问时

weixin_48014653的博客 6319

请你学习:前端布局3 - 浮动 float

由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响。给div1 div2 设置了。

一个搬砖工人 1468

机器学习实战7-基于机器学习算法预测相亲成功率

大家好,我是微学AI,今天给大家介绍一下机器学习实战7-基于机器学习算法预测相亲成功率,随着社会的发展,大家都忙于事业,对自己的终身大事就耽搁了,相亲是一种传统的寻找伴侣的方式,随着时代的发展,相亲的方式也在不断地改变。在这个过程中,了解相亲双方的信息以及预测相亲是否成功变得越来越重要。本文将介绍如何使用随机森林算法对相亲成功进行预测,通过分析男女双方的房子、车子、长相、家庭条件、父母情况、生活习惯、学历、性格、兴趣等因素,来预测相亲是否成功。

微学AI的博客 3035

css float 项目中浮动问题

如:  

weixin_38723657的博客 307

OpenCV实现物体尺寸的测量

物体尺寸测量的思路是找一个确定尺寸的物体作为参照物,根据已知的计算未知物体尺寸。如下图所示,绿色的板子尺寸为220*300(单位:毫米),通过程序计算白色纸片的长度。

qq_53545309的博客 9159

05_CSS浮动

tangerine17的博客 228

秃鹰搜索优化算法(BES)详解:从自然捕食到全局优化

秃鹰搜索优化算法(Bald Eagle Search Optimization Algorithm,BES)是由马来西亚学者Alsattar等人于2020年提出的一种新型元启发式优化算法。该算法灵感来源于秃鹰在自然界中高超的捕食行为,特别是其独特的狩猎策略和卓越的视觉搜索能力,模拟了秃鹰捕食鲑鱼等猎物的完整过程。

qq_42212808的博客 1353

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

css-float

CSS float 浮动属性   本篇主要介绍float属性:定义元素朝哪个方向浮动。 目录 1.页面布局方式:介绍文档流、浮动层以及float属性。 2.float:left:介绍float为 left 时的布局方式。 3.float:right:介绍float为 right 时的布局方式。 4.相邻元素含有float属性:介绍相邻元素含有float...

49

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

CSS清除浮动(float)脱标影响

一篇关于CSS清除浮动(float)脱标影响的笔记

Chasingthewinds的博客 128

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

html设置div靠左,float:left css浮动靠左 布局靠左

首先float是组织网页浮动(对象靠左left、靠右right)样式属性单词。在构造中咱们要让对象靠左显现只要求对对象设置float:left款式即可。一、float left语法1、float:left使用树范代码div{float:left}设置装备摆设div结构靠左。2、float:left评释float:left是配置对象靠左(浮动靠左)排版。不论div、p、span、h1、li等标签均可...

weixin_35572715的博客 1万+

css float属性

浮动 1、http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/ 2、http://my.

B_qxzb的专栏 903

浮动布局入门 实现新闻列表页面(float浮动布局)​

,使元素脱离文档流并向指定方向移动,直到碰到父容器边界或其他浮动元素。常用于实现多栏布局、图文混排等场景。浮动(float)是CSS中一种传统的布局方式,通过设置元素的浮动属性(

KAOER234的博客 235

CSS浮动

一、float   浮:加了浮动的元素盒子是浮起来的,漂浮在其他的标准流盒子上面   漏:加了浮动的盒子,不占位置的,它浮起来了,原来的位置漏给力标准流的盒子   特:特别注意,首先浮动的盒子需要和标准流的父级搭配使用,其次特别的注意浮动可以使元素显示模式提现为行内特性。 二、总结 浮动的目的就是为了让多个块级元素同一行上显示 转载于:https://www.cnblogs.com/mx...

weixin_30389003的博客 67

前端css页面优化:页面布局篇

今天分享下”前端css入门篇:组合标签“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 < 组合标签实际上都叫列表标签 分为无序列表和有序列表 //有序 内容 //无序 内容 //在标签内加这个属性,显示效果为去除序号 可以多层嵌套 可以自定义一个列表 自定义列表不仅仅是一列项目,而是项目及其注释的组合 自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始 中国 俄

yunduanaoligei的博客 817

CSS属性列表

属性名称字体属性(Font)font-familyfont-stylefont-variantfont-weightfont-size颜色和背景属性ColorBackground-colorBackground-imageBackground-repeatBackground-attachmentBackground-position文本属性Word-spacingLetter-spacingTe

路漫漫... 864

CSS 点滴

<br />css 里面 float:right 的容器要放在前面

tangjianft的专栏 606

dispaly、position、float的关系与相互作用

1、属性分析 display属性:规定元素生成框的类型。较为常见的有none-缺省值(用于隐藏元素,元素会消失于视界和文档流中),block-块级元素,inline-block-行内块级元素,list-item列表样式块级元素等。 position属性:规定元素的定位类型,常用于布局。static-默认值,元素出现在正常文档流中(此时不受top、left、right、bottom、z-index...

qq_44158936的博客 288

html清除float浮动效果

在前台页面上我们想要设置一个浮动,假如说有三个div,我们想要把其中两个div放在同一排。应该怎么去做呢? 由于div是块级元素,也就是每个div,都会独占一行,为了让两个div显示在同一行上,我们可以选择浮动(float)的方式,如果采用了浮动方式,那么就相当于把这两个div设置为行级元素,如果不清除的话,第三个div再次进入页面的时候就会占用这两个div的位置。 如果没有清除float,我们想要将第三个div放在两个同一行的div下面的期望就有可能无法实现 正确的使用方式是在第三个div的style里

qq_36572358的博客 620
上一篇: 【算法竞赛】超简单的字符串分词 | 算法竞赛技巧
下一篇: 【STL】binart_search、lower_bound、upper_bound详解 | STL二分算法 | STL底层源码解析
MuShan-bit
博客等级 码龄5年 538粉丝 30原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MuShan-bit

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值