资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/重新开始学前端之浮动

重新开始学前端之浮动

piapia / 1870人阅读

摘要：寒假来了打算重新学习总结前端的知识要点以及前端领域出现的新东西，因此有了这个系列。在正常布局下中位于该浮动元素之下的内容此时会围绕着浮动元素。在父元素上设置属性，如果此属性设置为或者则可以达到清除浮动的效果。但要注意并不是专门用于清除浮动。

寒假来了, 打算重新学习总结前端的知识要点以及前端领域出现的新东西，因此有了这个系列。更多内容可以去我的github: https://github.com/SGAMERyu
1. 浮动
1.1 什么是浮动

Float是一个CSS定位属性, 要了解他的目的和起源, 我们可以看看印刷设计, 在打印布局中, 可以将图像设置到页面中, 使得文本根据需要环绕他们。

;

而在页面中浮动是这样工作的: 浮动元素会脱离正常的文档布局流,并吸附在其父容器的左边/右边(float: left/right)。在正常布局下中位于该浮动元素之下的内容,此时会围绕着浮动元素。填满左侧或右侧的空间。

浮动元素仍然是网页流的一部分,这与使用绝对定位的页面不同, 绝对定位的页面元素将从网页的布局流中移除。

1.2 浮动使用场景

除了图像环绕文字之外,浮动可用于创建整个网页布局

在较小的布局中,浮动对布局也很有帮助, 如果我们使用float应用到我们的图像上,那么当图像改变大小时, 框中的文本将回流适应

同样的布局也可以通过容器上的相对定位和绝对定位来完成,这样做的话, 文本将不会受到化身的影响,并且不能在大小改变时重新排版

1.3 清除浮动

Float的相对属性是Clear, 一个拥有clear属性的元素, 并不向像浮动元素的方向移动,而是会在浮动元素的下方

在上面的例子中, slidebar像右浮动,比Main Content内容区域短,然后footer被移动到浮动所需的可用空间。要解决这个问题,我们可以给footer元素设置清除浮动时

#footer {
  clear: both;
}

clear也有四个有效值, both是最常用的,清楚来自任意方向的浮动, left和right可以用来分别从一个方向清除浮动。

1.4 浮动问题

如果父元素只包含浮动的元素,那么他的高度就会塌陷。如果父元素不包含任何视觉明显的背景,并不会有什么问题。但是更难的是这种情况


 float before
 




float after

这样输写代码会造成这样的情况

这样使用浮动会在文本流中出现不自然的间隔中断。而且没有实际的方法来修复他

1.5 清除浮动的技巧

空div法: 在父元素中添加一个div,也可以是
元素获取其他元素。

overflow: 在父元素上设置overflow属性，如果此属性设置为auto或者hidden则可以达到清除浮动的效果。但要注意overflow并不是专门用于清除浮动。

伪元素法: 使用伪元素来清除浮动，也是目前常用的方法

.clearfix{
  zoom: 1;
  display: block;
}
.clearfix:after{
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
阅读原文: https://css-tricks.com/all-ab...
GPU云服务器 云服务器 刚开始学 浮动-前端-css 从零开始学python java刚开始学什么

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

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

相关文章

  • 重新开始学前端之浮动

    摘要：寒假来了打算重新学习总结前端的知识要点以及前端领域出现的新东西，因此有了这个系列。在正常布局下中位于该浮动元素之下的内容此时会围绕着浮动元素。在父元素上设置属性，如果此属性设置为或者则可以达到清除浮动的效果。但要注意并不是专门用于清除浮动。 寒假来了, 打算重新学习总结前端的知识要点以及前端领域出现的新东西，因此有了这个系列。更多内容可以去我的github: https://githu...

    ZoomQuiet 评论0 收藏0

  • 26自学转行前端（写给和1年前一样迷茫的我的你）

    摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...

    番茄西红柿 评论0 收藏2637

  • 26自学转行前端（写给和1年前一样迷茫的我的你）

    摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...

    番茄西红柿 评论0 收藏2577

  • 26自学转行前端（写给和1年前一样迷茫的我的你）

    摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...

    番茄西红柿 评论0 收藏0

发表评论

登陆后可评论

0条评论

piapia

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<