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

Hydrogen 发布于2019-04-23 13:30 / 2785人阅读

摘要：当你想要做成这种布局效果的时候紫色框里面的内容那样它是一个列表元素是块级元素默认大小是父元素的宽并且换行如果没有背景的话那就不用管了可是问题来了它不但有背景而且是根据文字自适应的宽高这就是类型的功能了那么想让是设置隐

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

紫色框里面的内容那样

它是一个列表

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

一点问题都没有了

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

对吧

GPU云服务器云服务器 html让图片浮动元素浮动 html居中浮动元素浮动-前端-css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1967.html

元素auto宽高的影响因素

摘要：关于内联元素之前讨论的多是块级元素，而没有考虑到内联元素的情况。但巧合的是，在普通流定位中，内联元素宽度和高度规则却和块级元素绝对定位差不多，都只受内容大小影响。我们知道，元素在没有设置宽高的情况下，默认的宽高值都为auto。而这个auto到底是如何让元素自动拥有宽高的呢，也就是说，元素的宽度和高度到底会受到什么因素的影响？本文将通过一个例子来对这一问题一探究竟，HTML结构和初始c...

crelaber 2019-08-30 13:01 评论0 收藏0
CSS中重要的BFC

摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...

plus2047 2019-08-29 14:20 评论0 收藏0
【芝士整理】CSS基础图谱

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。选择器注意点属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...

iOS122 2019-08-30 15:54 评论0 收藏0
HTML & CSS 之小白再续前缘

摘要：标准文档流的常见现象空白折叠现象。浮动浮动的特点脱离标准文档流，元素一旦脱离标准文档流脱标，后面的元素会占据浮动元素原本的位置，而且元素就不再遵守文档流中块级元素和行内元素的特性。元素浮动会脱离文档流但是不会脱离文本流，所以会产生字围效果。 CSS 盒子模型（点击查看官方解释）实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成 conten...

Heier 2019-08-29 12:51 评论0 收藏0
HTML & CSS 之小白再续前缘

摘要：标准文档流的常见现象空白折叠现象。浮动浮动的特点脱离标准文档流，元素一旦脱离标准文档流脱标，后面的元素会占据浮动元素原本的位置，而且元素就不再遵守文档流中块级元素和行内元素的特性。元素浮动会脱离文档流但是不会脱离文本流，所以会产生字围效果。 CSS 盒子模型（点击查看官方解释）实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成 conten...

taohonghui 2019-08-01 17:04 评论0 收藏0