如何让浮动的元素换行??css

当你想要做成这种布局效果的时候

 

紫色框里面的内容那样

它是一个列表

li元素是块级元素  默认大小是父元素ul的宽 并且换行

如果li没有背景的话那就不用管了

可是问题来了它不但有背景 而且是根据文字自适应的宽高

这就是inline-block类型的功能了

那么想让li是inline-block 设置float  隐形改变

可是浮动的话 就不会换行了呀

问题又来了

没事滴  给li folat:left  然后在clear:both 清除浮动不就好了

 

 

 

清除浮动一共四个属性

clear:both|left|right|none;

我都测试了一下

首先box1 设置右clear:right 来达到不在同一行的目的

嗯 难道博主翻车了吗  怎么没有达到理想的效果呢??

那么我们把第二个元素box2设置clear:left; 看看结果

 

嗯 box1 box2 不在同一行了 实现了目的 

那为什么box1设置clear:right 不好使呢

因为呢box1 只能通过改变自己的位置来让自己右边没有浮动的元素

就像生活中 你改变不了别人 但是你可以改变自己

但是 box1就算改变了自己位置 box2 还会紧跟着box1的 因为浮动元素都是脱离文档流的

并且脱离文档流的理应去找脱离文档流的元素  因为元素变成了特殊的inline-block类型

有宽高 并且不换行   inline 和 block 特征合体  很牛逼

这里box1  就算清除右浮动  box2还是会跟着它 最终结果 box1 box2 box3 还是在一行

ps 可能你会想 那box1 跑到下一行  让box2 box3 不动就好了 那不行的  清除浮动  不是float:none 都是浮动 并且 在html

中box1  box2 box3 是依次创建的  凭什么你在我前面  你以为你是定位呢呢??瞎TM跑

 

但是box2清除左浮动  通过改变自身位置 换行

顺序还是不变的 box1  box2  box 3  

box3跟着box2  验证了前面说的

通过这次理解 对浮动又有了一个深刻的认知

 

 

所以你把需要换行的元素 都设置成clear:both

一点问题都没有了

左边不行 右边    右边也不行  那就靠下一个元素

对吧

 

本文转载于:猿2048▷https://www.mk2048.com/blog/blog.php?id=icack2j&title=如何让浮动的元素换行??css

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

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

相关文章

设置博客园标题样式

1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】,点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷新一…

关联查询mysql_《MySQL数据库》关联查询

原标题:《MySQL数据库》关联查询一、关联查询1、概念在查询数据时,所需要的数据不只在一张表中,可能在两张或多张表中。这个时候,需要同时操作这些表来查询数据,即关联查询。关联查询所涉及到的表与表之间都会存在有关…

NOIP2017年11月9日赛前模拟

最后一次NOIP模拟了 题目1:回文数字 Tom 最近在研究回文数字。  假设 s[i] 是长度为 i 的回文数个数(不含前导0),则对于给定的正整数 n 有: 以上等式中最后面的括号是布尔表达式,Tom 想知道S[n] mod 2333…

mysql视图表怎么设置约束_MySQL一一sql的视图、索引、约束

一、视图本质上相当于一张**“虚拟表”**,可当作独立的一张表进行操作(增、删、改、查)** 作用:**** a)**可通过权限控制,只将“表中的少数列”暴露给数据库用户,而不让该用户直接操纵数据库中“实际表”** b)**…

Software Development Life Cycle

转载于:https://www.cnblogs.com/genezhao/p/6879848.html

ArrayAndString(数组和字符串)

1.实现一个算法,确定一个字符串的所有字符是否全都不同。假使不允许使用额外的数据结构,又该怎么处理? public class UniqueChars {public static void main(String[] args) {// TODO Auto-generated method stubString string "abcdef…

position 的属性值

理论上来说,全部 position 的取值有8个 包括:position:static | relative | absolute | fixed | sticky | initial | inherit | unset 其中最常用的是 static 、relative、absolute、fixed 和 sticky initial、inherit、unset 是css的关键…

mysql数据库应用的权限层级_MySQL数据库的用户权限管理

嗨!各位小伙伴今天翻了一下历史记录MySQL 数据库还有点内容今天开始我们就来补上吧~用户权限管理伙伴们要知道,在数据库方面有两个方向。一个是数据库管理员(Database Administrator)简称DBA,一个是数据库开发工程师(Database Developer)&…

linux i2c adapter 增加设备_Linux驱动之I2C驱动架构

一、Linux的I2C体系结构主要由三部分组成:(1) I2C核心提供I2C控制器和设备驱动的注册和注销方法,I2C通信方法,与适配器无关的代码以及探测设备等。(2) I2C控制器驱动(适配器)(3) I2C设备驱动二、重要的结构体i2c_adapter//i2c控制器(适配器)i…

Alpha-end

前言 失心疯病源10团队代码管理github个人感悟 肝不动了,肝不动了。明天如果见不到我,不要太想我。站立会议 队名:PMS530雨勤(组长) 今天完成了那些任务 熬夜肝代码代码签入github明天的计划 肝到凌晨还剩下哪些任务 团…

避免写慢SQL

最近在整理数据库中的慢SQL,同时也查询了相关资料。记录一下,要学会使用执行计划来分析SQL。 1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存。这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的。当有很多相同…

为什么子孙后代会讨厌使用java.util.Stack

在我用无意义的重言式杀死你之前,这是要点 如果您的应用程序接近实时,或者将代码发送到Mars,则需要保留Java中默认的Stack实现。 根据LinkedList编写您自己的版本。 同样,如果您的应用程序是关键任务,并且希望堆栈由…

play 连接mysql_Play framework 2.x 连接mysql | 学步园

笔者所使用的系统为64位 windows7。本文假设java1.5版本以上环境已经搭好,play 框架已经下载至本地。首先我们创建一个项目。命令行进入play的目录命令:play new demo再次输入项目名字输入2 选择java项目创建完成界面OK,一个play框架下的java…

rpm -e --nodeps_微课 | rpm的思维导图

前导课程:微课 | rpm的查询、升级与卸载命令本次微课将演示使用xmind绘制rpm思维导图的过程,包括视频文字,大约需要你10分钟。另外,文末还有一则IT冷笑话,学习之余、会心一笑:)这个思维导图将包含以下内容:…

border-sizing属性详解和应用

box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式,不再冗赘。1. 属性讲解 content-box 默认值,也是css2.1中的盒子模型。在计算 width和…

Couchbase:使用Twitter和Java创建大型数据集

在播放/演示Couchbase或任何其他NoSQL引擎时,创建大型数据集的一种简单方法是将Twitter feed注入到数据库中。 对于这个小应用程序,我正在使用: Couchbase Server 2.0服务器 Couchbase Java SDK (将由Maven安装) T…

西门子scl语言编程手册_西门子SCL编程PEEK指令讲解

单词“peek”在英语中表示“偷看,瞥一眼”,在计算机编程中表示“读取数据”。在西门子SCL编程中,PEEK指令可以用来读取输入缓存区(I)、输出缓存区(Q)、位存储区(M)及数据块(DB)中的数据,常用作间接寻址。今天这篇文章,…

Guava的Collections2:过滤和转换Java集合

Groovy的便利之一是能够通过Groovy的闭包支持轻松地对集合执行过滤和转换操作。 Guava将对集合的过滤和转换引入标准Java,这是本文的主题。 Guava的Collections2类具有两个公共方法,这两个方法都是静态的。 方法filter(Collection&#xff0…

钉钉机器人怎么设置自动回复_项目部署成功后触发钉钉机器人发送消息提醒——入门配置...

钉钉建好一个群打开群设置, 找到群机器人添加一个你想要的机器人可以使用自定义自定义机器人可以自定义头像,名字,生成一个webhook(https post的请求地址)到这里, 钉钉机器人设置好了,接下来我们对照文档进行配置https://ding-doc.dingtalk.com/doc#/serverapi2/qf2nxq/XAzBI -…

mysql加锁语法_MySql 加锁问题

1、设置非自动提交 set autocommit0; 这时候 for update才会起作用2、一般用法 set autocommit0; for update(加锁) ; commit/rollback; set autocommit1;首先看一下,set autocommit0 后,执行哪些语句会自动加锁,加的是什么锁&#xff1f…