如何让浮动的元素换行??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,一经查实,立即删除!

相关文章

Python学习之类和实例

面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法,…

解决sublime里面的vue高亮的问题

下载插件文件:https://github.com/vuejs/vue-syntax-highlight 直接在官网下载放在安装时候的packages目录下(sublime text3\Sublime Text3\Data\Packages) 在Packages文件夹下新建一个vue的文件,把第一步下载的文件复制进去 subl…

python矩形填充颜色_在Python中找到所有用0填充的矩形

假设我们有一个二进制2D矩阵,现在我们必须找到所有用0填充的矩形的起点和终点。我们必须牢记,矩形是分开的,彼此之间不接触,但是它们可以接触阵列边界。仅包含单个元素的矩形也是可能的。所以,如果输入像-101110111011…

python concat_python中merge、concat用法

转载:https://blog.csdn.net/ly_ysys629/article/details/73849543 参考:https://blog.csdn.net/stevenkwong/article/details/52540605 数据规整化:合并、清理、过滤 pandas和python标准库提供了一整套高级、灵活的、高效的核心函数和算法将…

Vue使用axios无法读取data的解决办法

今天发现Vue中使用了axios后,then方法中无法读取到data中的数据了,总是提示 Cannot set property xxx of undefined 上网找了一圈后发现了一下解决方法。 解决办法1: methods:{tap:function(){var selfthis;axios.get(xxxxxx).then(function(…

设置博客园标题样式

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

Spring 3.1 –从数据库加载XML配置的属性

Spring使通过其PropertyPlaceholderConfigurer和(Spring 3.1之前)PropertySourcesPlaceholderConfigurer(Spring 3.1)从属性文件中获取的值易于注入。 这些类实现了BeanFactoryPostProcessor接口,该接口使它们能够在初…

如何判断PHP 是线程安全还是非线程安全的

什么是线程安全与非线程安全? 线程安全就是在多线程环境下也不会出现数据不一致,而非线程安全就有可能出现数据不一致的情况。 线程安全由于要确保数据的一致性,所以对资源的读写进行了控制,换句话说增加了系统开销。所以在单线程…

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

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

python语言语块句的标记_《自然语言处理理论与实战》

编辑推荐 1.讲解自然语言处理的理论 2.案例丰富,实战性强 3.适合自然语言处理学习的入门者 内容提要 自然语言处理是什么?谁需要学习自然语言处理?自然语言处理在哪些地方应用?相关问题一直困扰着不少初学者。针对这一情况&#x…

NOIP2017年11月9日赛前模拟

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

height百分比失效

heigh:100%失效 解决方案: 第一种 html, body { height: 100%; } 第二种 div { height: 100%; position: absolute; } 非定位元素的宽高百分比计算不会将 padding 计算在内,而定位元素会计算在内。 利用这个特性可以实现图片左右半区点击分别上一张图…

Java堆空间,本机堆和内存问题

最近,我在和一个朋友讨论为什么Java进程使用的内存比启动Java进程时设置的最大堆多。 代码创建的所有Java对象都是在Java堆空间内创建的,其大小由-Xmx选项定义。 但是一个Java进程由很多空间组成,而不仅仅是Java堆空间。 以下是组成Java进程…

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

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

Software Development Life Cycle

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

python中 的用法_详解python中@的用法

python中的用法 是一个装饰器,针对函数,起调用传参的作用。 有修饰和被修饰的区别,function作为一个装饰器,用来修饰紧跟着的函数(可以是另一个装饰器,也可以是函数定义)。 代码1 结果1 Its fun…

ArrayAndString(数组和字符串)

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

MyBatis教程– CRUD操作和映射关系–第2部分

为了说明这一点,我们正在考虑以下示例域模型: 会有用户,每个用户可能都有一个博客,每个博客可以包含零个或多个帖子。 这三个表的数据库结构如下: CREATE TABLE user (user_id int(10) unsigned NOT NULL auto_incr…

position 的属性值

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

[ JavaScript ] JavaScript 实现继承.

对于javascript中的继承,因为js中没有后端语言中的类式继承。所以js中的继承,一般都是原型继承(prototype)。 function P (name){this.name name;this.say function(){console.log(p);} }function S (name,id){this.id id;this.eat function(){conso…