如何让浮动的元素换行？？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

如何让浮动的元素换行？？css相关推荐

ie6 ie7下使用clear不能将浮动的元素换行问题
在主流浏览器中使用clear方法可以轻松完成浮动元素的换行. 例如: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...
css如何让浮动的元素占位,CSS visibility 属性使元素占位，但不可见
二.快速起步(Mysql镜像) 1.登录镜像站点 docker login daocloud.io 用户名密码邮箱 1.1 拉取镜像 docker pull [option] name:[tag] ...
清除浮动-双伪元素清除浮动（HTML、CSS）
清除浮动-双伪元素清除浮动(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...
从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
css center元素,[译]CSS 居中（Center）方法大合集
本文只给出了不同条件下的实现方式,未对原理做探讨. PS:原来要显示 jsfiddle 和 CodePen 之类网站的代码预览,只需将其以 Markdown 语法来插入链接即可. 水平居中行内元素 ...
php浮动边框设置属性,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
html怎么控制字数换行,css 如何控制span 强制换行
css 如何控制span 强制换行以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! css 如何控制span 强制换行 & ...
html网页让字体浮动的颜色,HTML/CSS从零开始-常用属性(三)(示例代码)
一.css文本属性 (1)文本大小{font-size:value;} 单位:pt:9pt=12px;浏览器默认字体大小为16px em:1em=16px; 在CSS2.0中 xx-small:9px ...
html页面左对齐不换行,css如何设置不换行？
在HTML网页中文章标题列表通常要使用H标签样式,使用此样式后文本就会自动换行,但是我们通常不想换行,那么我们该如何使用css设置不换行呢?下面我们来看一下css设置不换行的方法. 我们可以通过为元素 ...

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

如何让浮动的元素换行？？css相关推荐

最新文章

热门文章