CSS 浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS 浮动
请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
CSS float 属性
在 CSS 中,我们通过 float 属性实现元素的浮动。
行框和清理
浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。
因此,创建浮动框可以使文本围绕图像:
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:
这是一个有用的工具,它让周围的元素为浮动元素留出空间。
让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
这种情况下,出现了一个问题。因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。
如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:
不幸的是出现了一个新的问题,由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
这样可以实现我们希望的效果,但是需要添加多余的代码。常常有元素可以应用 clear,但是有时候不得不为了进行布局而添加无意义的标记。
不过我们还有另一种办法,那就是对容器 div 进行浮动:
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
这样会得到我们希望的效果。不幸的是,下一个元素会受到这个浮动元素的影响。为了解决这个问题,有些人选择对布局中的所有东西进行浮动,然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少或消除不必要的标记。
事实上,W3School 站点上的所有页面都采用了这种技术,如果您打开我们使用 CSS 文件,您会看到我们对页脚的 div 进行了清理,而页脚上面的三个 div 都向左浮动。
相关推荐
本书用作者学习的经历向你讲述了基本css语法,通过实例让读者了解如何来用DIV+CSS来替代传统的table布局 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有...
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
文章目录一篇快速入门HTML一篇快速入门CSS一篇...一是总结一下自己的学习经历,二来帮助想要学习的小伙伴快速掌握基础,光速入门。 最后还有博主找的B站上的视频学习,自己把代码敲出来,详细的注释供大家练手使用。 另
每个项目可以包括工作/学习的日期、公司/学校名称、职位/学位、项目描述等。 侧边栏:可以用来展示你的技能列表、专业证书、语言能力等其他信息。 工作经验:按时间顺序列出你的工作经历,包括公司名称、工作职位和...
这是我为自己创建的课程目录变换:旋转,平移,倾斜,缩放,3DCSS框架CSS预处理器课程Freecodecamp(FCC) FCC的部分“响应式Web设计认证”是您需要学习的扎实指南。 我很讨厌经历。 他们为您提供项目和完成上述...
让我们一个走进前端的奇妙世界,这一路走来,虽然经历了千辛万苦,但是我们不要放弃自己学习的动力,慢慢地爱上它,并克服它,共同学习,共同进步,加油,加油,加油,让青春不再失去最初的意义,最后达到了一个自己...
本书用作者学习的经历向你讲述了基本css语法,通过实例让读者了解如何来用DIV+CSS来替代传统的table布局 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有...
我们认为,发展必须是一种令人愉快的,富有创造力的经历,才能真正实现。 Laravel减轻了许多Web项目中使用的常见任务,从而减轻了开发过程中的痛苦,例如: 。 。 用于和存储的多个后端。 富有表现力,直观的 ...
功能齐全 :check_mark: 没有抽象需要经历-样式这只是CSS。 使用任何可用CSS功能。 范围选择器 :check_mark: 将CSS移出全局名称空间。 样式它自动为您将选择器的作用域范围设置为组件的根元素,并充当子树作用域的...
如果我做错了问题,请学习正确答案,以便我可以学习 在每场比赛结束时查看我的分数 能够就我的经历提供反馈 设计 线框 家 规则 设定值 测验 分数 最后一页 家 规则- 概述测验规则 设置- 允许用户将设置应用于测验...
#####目前坐标:辽宁大连 #####路漫漫其修远,吾将...CSS HTML 备忘录 面试 转—前端开发面试题 ####优秀博客 张云龙 玉伯 Heero ####优秀教程 React 入门实例教程 一看就懂的ReactJs入门教程-精华版 AngularJS中文网
大厂前端面试实际工作经验问题|# 开始 无论是校招还是社招,企业都希望得到工作经验丰富的候选人。...应届毕业生也需要工作经验 —— 你的毕业设计,实习经历 ## 看几个题目 列几个有代表性的问题,参考视频。
对我来说,这是一次很棒的学习经历,而且我认为我已经学到了很多东西并提高了自己。 这是我每天使用的网站,因此我必须包含我需要的所有内容。 您会看到一些可能不适合您的页面,但这是一个真实的应用程序,我需要...
闲在家里,打算出一个前端系列的技术博客,讲一下自己学习网站搭建、HTML、CSS、Javascript、Django等的学习经历。 对于新手来说,在github搭建免费的个人主页,不失为一个很好的练手方法,以下将记录我在很久以前在...
我们认为,发展必须是一种令人愉快的,富有创造力的经历,才能真正实现。 Laravel减轻了许多Web项目中使用的常见任务,从而减轻了开发过程中的痛苦,例如: 。 。 用于和存储的多个后端。 富有表现力,直观的 ...
但是,这是一次很棒的学习经历,我希望将从中学到的教训吸纳到未来的项目中。 我学到的是: 创建一个看起来不错的网站并不像我想象的那样直观。 将所有内容组织到单独的div中通常可以简化设计 该过程要花很多...
:closed_book: 指数 :memo: 关于 Loopstudios是为学习目的而开发的完全响应式...通过新的学习向HTML和CSS展示自己,以进一步利用我在此类语言中的知识。 :link: 申请链接 访问该应用程序。 :hammer_and_wrench: 技术
挑战很有趣,学习了一些导航技巧 如果我自己这么说的话,构建导航真的很有趣。 (呵呵) Flexbox 布局非常强大且易于理解。 对布局添加了一些小的调整,因为我认为它看起来更好。 (呵呵) 你学到了什么/改进了...
我们认为,发展必须是一种令人愉快的,富有创造力的经历,才能真正实现。 Laravel减轻了许多Web项目中使用的常见任务,从而减轻了开发过程中的痛苦,例如: 。 。 用于和存储的多个后端。 富有表现力,直观的 。 ...